# 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;

# 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

# 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

# Examples

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

const removedButton = panelManager.removeButton('myNewPanel', 'myNewButton');

Returns (Button | null) Removed button.

# getButton

Get button from the panel

# Parameters

# Examples

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

Returns (Button | null)