How to add a custom button to the grapesjs toolbar?

Question

How do you add a custom button to the grapesjs toolbar?

I have followed the instructions on this github issue and written the code below, but the button doesn't appear in the toolbar as expected.

What am I missing?

initToolbar() {
        const { em } = this;
        const model = this;
        const ppfx = (em && em.getConfig('stylePrefix')) || '';

        if (!model.get('toolbar')) {
            var tb = [];
            if (model.collection) {
                tb.push({
                    attributes: { class: 'fa fa-arrow-up' },
                    command: ed => ed.runCommand('core:component-exit', { force: 1 })
                });
            }
            if (model.get('draggable')) {
                tb.push({
                    attributes: {
                        class: `fa fa-arrows ${ppfx}no-touch-actions`,
                        draggable: true
                    },
                    //events: hasDnd(this.em) ? { dragstart: 'execCommand' } : '',
                    command: 'tlb-move'
                });
            }
            if (model.get('schedule')) {
                tb.push({
                    attributes: { class: 'fa fa-clock', },
                    command: 'tlb-settime'
                });
            }
            if (model.get('copyable')) {
                tb.push({
                    attributes: { class: 'fa fa-clone' },
                    command: 'tlb-clone'
                });
            }
            if (model.get('removable')) {
                tb.push({
                    attributes: { class: 'fa fa-trash-o' },
                    command: 'tlb-delete'
                });
            }
            model.set('toolbar', tb);
        }
    },

score 3 · Answer 1 · answered Jun 02 '20 at 23:00

One way to add new toolbar icons is to add the button as each component is selected.

  // define this event handler after editor is defined
  // like in const editor = grapesjs.init({ ...config });
  editor.on('component:selected', () => {

    // whenever a component is selected in the editor

    // set your command and icon here
    const commandToAdd = 'tlb-settime';
    const commandIcon = 'fa fa-clock';

    // get the selected componnet and its default toolbar
    const selectedComponent = editor.getSelected();
    const defaultToolbar = selectedComponent.get('toolbar');

    // check if this command already exists on this component toolbar
    const commandExists = defaultToolbar.some(item => item.command === commandToAdd);

    // if it doesn't already exist, add it
    if (!commandExists) {
      selectedComponent.set({
        toolbar: [ ...defaultToolbar, {  attributes: {class: commandIcon}, command: commandToAdd }]
      });
    }

  });

If it's important to you that only components with the "schedule" attribute have this toolbar option show up, as in your example, you can access and check this from selectedComponent:

const selectedComponent = editor.getSelected();
const defaultToolbar = selectedComponent.get('toolbar');
const commandExists = defaultToolbar.some(item => item.command === commandToAdd);

// add this
const hasScheduleAttribute = selectedComponent.attributes.schedule;

if (!commandExists && hasScheduleAttribute) { // ...set toolbar code

I tried a lot setting the toolbar or even give me an alert that it works when I am pressing the icon but nothing worked. If you can help with that it would be much appreciated. — Elias Khazzaka, Jun 05 '20 at 06:53
Dear @EliasKhazzaka, If my answer successfully answered your original question (how to add a button to the grapesjs toolbar) please mark my answer as correct. If you have a follow-up question involving how to correctly set up grapesjs commands, please create another stackoverflow question and I'd be happy to take a look. Cheers. — GiorgiosJames, Jun 07 '20 at 14:54

How to add a custom button to the grapesjs toolbar?

1 Answers1