GrapesJS

# Panels

You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object (opens new window)

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 (opens new window)

# addPanel

Add new panel to the collection

# Parameters

# Examples

const 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

# Examples

const somePanel = panelManager.getPanel('somePanel');
const removedPanel = panelManager.removePanel(somePanel);

// or by id
const removedPanel = panelManager.removePanel('myNewPanel');

Returns Panel Removed panel

# getPanel

Get panel by ID

# Parameters

# Examples

const myPanel = panelManager.getPanel('myPanel');

Returns (Panel | null)

# addButton

Add button to the panel

# Parameters

# Examples

const 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

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

Returns (Button | null)

← Pages →