Grapesjs: Adding toolbar items

[Pisikoll]

Hey

I would like to add new buttons to this section, but I can't find anything from wiki. Also is there any way to listen when element is selected?

Thanks

[artf]

Hi @Pisikoll at the moment I haven't yet documented components toolbar but it's just an array of objects containing 2 keys: attributes and command which indicates the command to execute.
For instance, the default component would be like this:

defaults: {
  // other model properties
  toolbar: [{
    attributes: {class: 'fa fa-arrows'},
    command: 'tlb-move',
  },{
    attributes: {class: 'fa fa-clone'},
    command: 'tlb-clone',
  },{
    ...
  }],
}

If you want to know when one of those buttons is executed you can listen to command events

editor.on('run:tlb-clone', () => {});

[kukreja38]

hi @artf can we add button and like star icon in right toolbox?
Thanks!

[umerrinayat]

Hi @artf I'm trying to add a new element in blue toolbar. e.g. A link icon. Is there any way I can update the toolbar in grapesjs initialization? I'm currently using grapesjs in react based project. Thanks

[labmux]

@kukreja38 @umerrinayat @Pisikoll Hey guys, so the way I added my own toolbar element was to override the default toolbar with my own as so:

component.set({
                    toolbar: [
                        // these are the default toolbar elements
                        {
                            attributes: {class: 'fa fa-arrow-up'},
                            command: 'select-parent'
                        },
                        {
                            attributes: {class: 'fa fa-arrows'},
                            command: 'tlb-move'
                        },
                        {
                            attributes: {class: 'fa fa-clone'},
                            command: 'tlb-clone',
                        },
                        {
                            attributes: {class: 'fa fa-trash'},
                            command: 'tlb-delete'
                        },
                        // this is my new toolbar element with my custom command
                        {
                            attributes: {class: 'fa fa-arrows-alt'},
                            command: 'tlb-fill'
                        }
                    ]
                });

Hope this helped

update: I really dont know why it didnt indent my code, sorry about that

[Elvincth]

@kukreja38 @umerrinayat @Pisikoll Hey guys, so the way I added my own toolbar element was to override the default toolbar with my own as so:

component.set({ toolbar: [ // these are the default toolbar elements { attributes: {class: 'fa fa-arrow-up'}, command: 'select-parent' }, { attributes: {class: 'fa fa-arrows'}, command: 'tlb-move' }, { attributes: {class: 'fa fa-clone'}, command: 'tlb-clone', }, { attributes: {class: 'fa fa-trash'}, command: 'tlb-delete' }, // this is my new toolbar element with my custom command { attributes: {class: 'fa fa-arrows-alt'}, command: 'tlb-fill' } ] });

Hope this helped

update: I really dont know why it didnt indent my code, sorry about that

Hello , I would like to ask what is the variable "component" excatly , editor.DomComponents?
Cause, I tried it dosen't work thx.

[umerrinayat]

Hey @Elvincth Yes you have to use editor.DomComponents to get specific type and change it toolbar.
Here is my code where I'm adding a link icon in toolbar when use click on anchor tag.

let linkCommandId = 'tlb-link-editor-modal'; // Id to use to create the button and anchor tag editor command
let toolbarIcon = `<i class="fas fa-paperclip"></i>`; // Icon used in the component toolbar

var linkType = editor.DomComponents.getType('link');
const linkTypeModel = editor.DomComponents.getType('link').model;

editor.DomComponents.addType('link', {
    model: {
        initToolbar() {
            linkTypeModel.prototype.initToolbar.apply(this, arguments);
            const tb = this.get('toolbar');
            const tbExists = tb.some(item => item.command === linkCommandId);

            // Add link icon in case user click on anchor tag
            if (!tbExists) {
                tb.unshift({
                    command: linkCommandId,
                    label: toolbarIcon,
                });
                this.set('toolbar', tb);
            }
        }
    },
    // Double click on link open link editor
    view: linkType.view.extend({
        events: {
            "dblclick": "editLink"
        },
        editLink: function (e) {
            e.stopImmediatePropagation(); // prevent the RTE from opening
            editor.runCommand(linkCommandId, {});
        }
    })
});

[Elvincth]

Hey @Elvincth Yes you have to use editor.DomComponents to get specific type and change it toolbar.
Here is my code where I'm adding a link icon in toolbar when use click on anchor tag.

let linkCommandId = 'tlb-link-editor-modal'; // Id to use to create the button and anchor tag editor command
let toolbarIcon = `<i class="fas fa-paperclip"></i>`; // Icon used in the component toolbar

var linkType = editor.DomComponents.getType('link');
const linkTypeModel = editor.DomComponents.getType('link').model;

editor.DomComponents.addType('link', {
  model: {
      initToolbar() {
          linkTypeModel.prototype.initToolbar.apply(this, arguments);
          const tb = this.get('toolbar');
          const tbExists = tb.some(item => item.command === linkCommandId);

          // Add link icon in case user click on anchor tag
          if (!tbExists) {
              tb.unshift({
                  command: linkCommandId,
                  label: toolbarIcon,
              });
              this.set('toolbar', tb);
          }
      }
  },
  // Double click on link open link editor
  view: linkType.view.extend({
      events: {
          "dblclick": "editLink"
      },
      editLink: function (e) {
          e.stopImmediatePropagation(); // prevent the RTE from opening
          editor.runCommand(linkCommandId, {});
      }
  })
});

Got it thankas a lot for your reply! It helped me alot 👍