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' },
                    mand: ed => ed.runCommand('core:ponent-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' } : '',
                    mand: 'tlb-move'
                });
            }
            if (model.get('schedule')) {
                tb.push({
                    attributes: { class: 'fa fa-clock', },
                    mand: 'tlb-settime'
                });
            }
            if (model.get('copyable')) {
                tb.push({
                    attributes: { class: 'fa fa-clone' },
                    mand: 'tlb-clone'
                });
            }
            if (model.get('removable')) {
                tb.push({
                    attributes: { class: 'fa fa-trash-o' },
                    mand: 'tlb-delete'
                });
            }
            model.set('toolbar', tb);
        }
    },

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' },
                    mand: ed => ed.runCommand('core:ponent-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' } : '',
                    mand: 'tlb-move'
                });
            }
            if (model.get('schedule')) {
                tb.push({
                    attributes: { class: 'fa fa-clock', },
                    mand: 'tlb-settime'
                });
            }
            if (model.get('copyable')) {
                tb.push({
                    attributes: { class: 'fa fa-clone' },
                    mand: 'tlb-clone'
                });
            }
            if (model.get('removable')) {
                tb.push({
                    attributes: { class: 'fa fa-trash-o' },
                    mand: 'tlb-delete'
                });
            }
            model.set('toolbar', tb);
        }
    },

• javascript
• html
• grapesjs

1 Answer 1

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

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

    // whenever a ponent is selected in the editor

    // set your mand and icon here
    const mandToAdd = 'tlb-settime';
    const mandIcon = 'fa fa-clock';

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

    // check if this mand already exists on this ponent toolbar
    const mandExists = defaultToolbar.some(item => item.mand === mandToAdd);

    // if it doesn't already exist, add it
    if (!mandExists) {
      selectedComponent.set({
        toolbar: [ ...defaultToolbar, {  attributes: {class: mandIcon}, mand: mandToAdd }]
      });
    }

  });

If it's important to you that only ponents 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 mandExists = defaultToolbar.some(item => item.mand === mandToAdd);

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

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