How to add a custom button with custom command in default panel of grapesjs

Use editor.Panels.getPanels() to get all the available panels and then use addButtons method shown below.Here 'options' is the panel name

editor.Panels.addButton('options', [ { id: 'save', className: 'fa fa-floppy-o icon-blank', command: function(editor1, sender) { alert('Hello World') }, attributes: { title: 'Save Template' } }, ]);

I also had trouble with that when had tried to button to Panel. So, I used the following way: ` editor.Panels.addButton('#target panel id#',

{ id: 'alert-button', className: 'btn-alert-button', label: 'Click my butt(on)', command(editor) { alert('Hello World'); } active: true }); ` However, the panel and button were displayed.

It turns on it needs to use the render method to rerender Panel manager object. I can't find information about it into docs. So, decided this note here: editor.Panels.render(); After that, the button and panel are displayed.

This is well documented at https://grapesjs.com/docs/getting-started.html#panels-buttons. You have two methods to add a panel with buttons: (1) When initializing GrapesJS, (2) After GrapesJS was initialized with addPanel.

Please note that this is for a panel that you have defined with <div id='basic-actions'></div>.

GrapesJS.init()

this.editor = grapesjs.init({
      container: '#gjs',
      fromElement: false,/* https://github.com/artf/grapesjs#usage */
      addBasicStyle: true,
      height: '800px',
      width: 'auto',

      panels: {
  id: 'basic-actions',
  el: '.panel__basic-actions',
  buttons: [
    {
      id: 'alert-button',
      className: 'btn-alert-button',
      label: 'Click my butt(on)',
      command(editor) { alert('Hello World'); }
    }
  ]
},
...});

After GrapesJS was initialized

editor.Panels.addPanel({
  id: 'basic-actions',
  el: '.panel__basic-actions',
  buttons: [
    {
      id: 'alert-button',
      className: 'btn-alert-button',
      label: 'Click my butt(on)',
      command(editor) { alert('Hello World'); }
    }
  ]
});