Closed bungambohlah closed 7 years ago
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
Great overview @ahmeddabak 👍
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?
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.
@ahmeddabak Thank you very much, this is nice and helpfully, :+1:
@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
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'
}
I found this topic very useful. Here is a way to search for more than one class:
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.
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:
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).
@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
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"
@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
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.
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: