Grapesjs: [Question] How to add button or customize the blue panel menu?

[bungambohlah]

Hello @artf my last issue is works now, and i have a question for you again, and sorry i have a lot question for you in the next time, hahaha :laughing:
How to add or customize the blue panel menu that i marked with red block?

Thank you for your help and keep up to date with this grapesjs, nice web builder that i have ever seen :+1:

[ahmeddabak]

so this is how you can start,

the blue panel menu is the component toolbar

it is being initialized in the src/grapesjs/dom_components/model/Component.js:189

the code looks like

  /**
   * Init toolbar
   */
   initToolbar() {
    var model = this;
    if(!model.get('toolbar')) {
      var tb = [];
      if(model.get('draggable')) {
        tb.push({
          attributes: {class: 'fa fa-arrows'},
          command: 'tlb-move',
        });
      }
      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);
    }
  },

so if you would add here a new button with a custom command like

 if(model.get('removable')) { // check for component properties before adding the button to the toolbar
      tb.push({
            attributes: {class: 'fa fa-user'}, // icon class from font awesome
            command: 'tlb-delete', //here you need to use your command
      });
 }

you should get the result you want, for the command you can use the documentation for further informations
https://github.com/artf/grapesjs/wiki/API-Commands

the commands for the current items in the tool bar you can find in
src/grapesjs/commands/index.js:108

i hope this would help you

[artf]

Great overview @ahmeddabak 👍

[bungambohlah]

Hello @ahmeddabak Thank you very much for your help, but it's initialized for all components right? and can i initialize for specific component like link's component?

[ahmeddabak]

if you check the code you will see in the first line of the function initToolbar

var model = this;

so the instance of each component in Grapejs will be assigned to the model variable before the initialization of its toolbar.

in the comments i wrote for you
if(model.get('removable')) { // check for component properties before adding the button to the toolbar

the model variable here is an instance of a component so you can write of exampel

 if(model.attributes.tagName === 'h1') { 
      tb.push({
            attributes: {class: 'fa fa-user'}, 
            command: 'tlb-delete',
      });
 }

in this case the button will be added only to 'h1' elemnts, you can do all the types of checks before adding new buttons

i recomend that you do a console.log(model); and see the attributes you can check for.

[bungambohlah]

@ahmeddabak Thank you very much, this is nice and helpfully, :+1:

[bungambohlah]

@ahmeddabak can you show some example code of check for component have class properties, like

<div class="modal-trigger item-menu"></div>

I want to check component have modal-trigger or not. if have it then that component will be add the my custom toolbar

[artf]

Here an example code

const model = editor.getSelected();

// using the Model
const classCollection = model.get('classes');
if (classCollection.where({name: 'your-class'}).length) {
     // has 'your-class'
}

// using the View
if (model.view.$el.hasClass('your-class')) {
     // has 'your-class'
}

[daniel-farina]

I found this topic very useful. Here is a way to search for more than one class:

```php
const model = editor.getSelected();
const classCollection = model.get('classes');
var searchClassNames = classCollection.filter(function(ClassResult) {
return Classname.get("name") === 'col' ||
ClassResult.get("name") === "class-1" ||
ClassResult.get("name") === "class-2" ||
ClassResult.get("name") === "class-3" ||
ClassResult.get("name") === "class-4"
});

    if (searchClassNames .length) {
   console.log('I found one the classes above')
   }

````

Feel free to let me know if there is a cleaner way with backbone.

[bungambohlah]

Feel free to let me know if there is a cleaner way with backbone.

Thank you very much @daniel-farina , it's very helpful. btw i don't know nothing about Backbone :rofl: . thank you :+1:

[sakshigarg9]

so this is how you can start,

the blue panel menu is the component toolbar

it is being initialized in the src/grapesjs/dom_components/model/Component.js:189

the code looks like

  /**
   * Init toolbar
   */
   initToolbar() {
    var model = this;
    if(!model.get('toolbar')) {
      var tb = [];
      if(model.get('draggable')) {
        tb.push({
          attributes: {class: 'fa fa-arrows'},
          command: 'tlb-move',
        });
      }
      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);
    }
  },

so if you would add here a new button with a custom command like

 if(model.get('removable')) { // check for component properties before adding the button to the toolbar
      tb.push({
            attributes: {class: 'fa fa-user'}, // icon class from font awesome
            command: 'tlb-delete', //here you need to use your command
      });
 }

you should get the result you want, for the command you can use the documentation for further informations
https://github.com/artf/grapesjs/wiki/API-Commands

the commands for the current items in the tool bar you can find in
src/grapesjs/commands/index.js:108

i hope this would help you

Hi, can you help me with how I can add a button on the toolbar using a command. I wish to add the edit icon(pencil) to the image and text components. I want the edit button to trigger the asset manager(for images) and text-editor(for text).

[artf]

@sakshigarg9 this is how I add the pencil button, to all images, via the image editor plugin
https://github.com/artf/grapesjs-tui-image-editor/blob/e76e65cb9c4ecbb66c96207d79a266b88f1e4b4c/src/index.js#L121-L137

[umerrinayat]

Hello, I'm using grapesJs in my project and I'm facing few issues. I hope someone can help me figure it out. So I've already integrated grapesjs in react app and its working fine. Now I want to add few more elements in grapesjs toolbar.
e.g for link I want a icon in toolbar that will open a popup for edit links. The problem is that I can't find anything on grapesjs docs.
https://github.com/artf/grapesjs/issues/266
I don't want to edit this file directly "src/grapesjs/dom_components/model/Component.js:189"

[artf]

@umerrinayat
Extend the link component (read the docs for more info) with the toolbar property updated

editor.DomComponent.addType('link', {
    model: {
        defaults: {
          // other model properties
          toolbar: [{
            attributes: {class: 'fa fa-arrows'},
            command: 'tlb-move',
          },{
            attributes: {class: 'fa fa-clone'},
            command: 'tlb-clone',
          },{
            ...
          }],
        }
    }
})

ps: please, avoid posting on different old issues about the same issue... is quite annoying

[VelinSE]

Hello,
I see this is still a somewhat active topic, so here is how you can easily "extend" a toolbar using ES6's spread operator.

Here I'm extending a base model created by me, but it works with any model you'd like to take the toolbar from.