API Panels

Artur Arseniev edited this page Jun 18, 2016 · 2 revisions

Panels

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'
       }
     }],
    }],
}
...

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,
});

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

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

getButton

Get button from the panel

Parameters

Examples

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

Returns (Button|null)

getPanel

Get panel by ID

Parameters

Examples

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

Returns (Panel|null)

getPanels

Returns the collection of panels

Returns Collection Collection of panel

render

Render panels and buttons

Returns HTMLElement