docs/api/panels.md
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;
Returns the collection of panels
Returns Collection Collection of panel
Returns panels element
Returns HTMLElement
Add new panel to the collection
panel (Object | Panel) Object with right properties or an instance of Panelconst newPanel = panelManager.addPanel({
id: 'myNewPanel',
visible: true,
buttons: [...],
});
Returns Panel Added panel. Useful in case passed argument was an Object
Remove a panel from the collection
panel (Panel | String) Panel instance or panel idconst somePanel = panelManager.getPanel('somePanel');
const removedPanel = panelManager.removePanel(somePanel);
// or by id
const removedPanel = panelManager.removePanel('myNewPanel');
Returns Panel Removed panel
Get panel by ID
id string Id stringconst myPanel = panelManager.getPanel('myPanel');
Returns (Panel | null)
Add button to the panel
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
Remove button from the panel
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.
Get button from the panel
const button = panelManager.getButton('myPanel', 'myButton');
Returns (Button | null)