grapesjs/docs/api/panels.md

Panels

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

This module manages panels and buttons inside the editor. You can init the editor with all panels and buttons necessary via configuration

var editor = grapesjs.init({
  ...
 panels: {...} // Check below for the possible properties
  ...
});

Before using methods you should get first the module from the editor instance, in this way:

var panelManager = editor.Panels;

Parameters

• config Object Configurations
  • config.defaults Array<Object> Array of possible panels (optional, default [])

Examples

...
panels: {
   defaults: [{
     id: 'main-toolbar',
     buttons: [{
       id: 'btn-id',
       className: 'some',
       attributes: {
         title: 'MyTitle'
       }
     }],
    }],
}
...

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