grapesjs/docs/api/panels.md

Panels

You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object

const editor = grapesjs.init({
 panels: {
   // options
 }
})

Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance

const panelManager = editor.Panels;

• addPanel
• addButton
• removeButton
• getButton
• getPanel
• getPanels
• getPanelsEl
• removePanel
• removeButton
• render

init

Initialize module. Automatically called with a new instance of the editor

Parameters

• config Object Configurations

getPanels

Returns the collection of panels

Returns Collection Collection of panel

getPanelsEl

Returns panels element

Returns HTMLElement

addPanel

Add new panel to the collection

Parameters

• panel (Object | Panel) Object with right properties or an instance of Panel

Examples

var newPanel = panelManager.addPanel({
  id: 'myNewPanel',
 visible  : true,
 buttons  : [...],
});

Returns Panel Added panel. Useful in case passed argument was an Object

removePanel

Remove a panel from the collection

Parameters

• panel (Object | Panel | String) Object with right properties or an instance of Panel or Painel id

Examples

const newPanel = panelManager.removePanel({
  id: 'myNewPanel',
 visible  : true,
 buttons  : [...],
});

const newPanel = panelManager.removePanel('myNewPanel');

Returns Panel Removed panel. Useful in case passed argument was an Object

getPanel

Get panel by ID

Parameters

• id string Id string

Examples

var myPanel = panelManager.getPanel('myNewPanel');

Returns (Panel | null)

addButton

Add button to the panel

Parameters

• panelId string Panel's ID
• button (Object | Button) Button object or instance of Button

Examples

var newButton = panelManager.addButton('myNewPanel',{
  id: 'myNewButton',
  className: 'someClass',
  command: 'someCommand',
  attributes: { title: 'Some title'},
  active: false,
});
// It's also possible to pass the command as an object
// with .run and .stop methods
...
command: {
  run: function(editor) {
    ...
  },
  stop: function(editor) {
    ...
  }
},
// Or simply like a function which will be evaluated as a single .run command
...
command: function(editor) {
  ...
}

Returns (Button | null) Added button. Useful in case passed button was an Object

removeButton

Remove button from the panel

Parameters

• panelId string Panel's ID
• button (Object | Button | String) Button object or instance of Button or button id

Examples

const removedButton = panelManager.removeButton('myNewPanel',{
  id: 'myNewButton',
  className: 'someClass',
  command: 'someCommand',
  attributes: { title: 'Some title'},
  active: false,
});

// It's also possible to use the button id
const removedButton = panelManager.removeButton('myNewPanel','myNewButton');

Returns (Button | null) Removed button.

getButton

Get button from the panel

Parameters

• panelId string Panel's ID
• id string Button's ID

Examples

var button = panelManager.getButton('myPanel','myButton');

Returns (Button | null)

render

Render panels and buttons

Returns HTMLElement