Javascript 如何将自定义按钮添加到grapesjs工具栏？

如何将自定义按钮添加到grapesjs工具栏

我已经按照上的说明编写了下面的代码，但是按钮并没有像预期的那样出现在工具栏中

我错过了什么

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);
        }
    },

---

添加新工具栏图标的一种方法是在选择每个组件时添加按钮

  // 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 }]
      });
    }

  });

如果只有具有“schedule”属性的组件才会显示此工具栏选项对您很重要，如您的示例中所示，您可以从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

---

我尝试了很多设置工具栏的方法，甚至在按下图标时给我一个提示，它可以工作，但没有任何效果。亲爱的@EliasKhazzaka，如果我的答案成功地回答了您最初的问题（如何在grapesjs工具栏上添加按钮），请将我的答案标记为正确。如果您有关于如何正确设置grapesjs命令的后续问题，请创建另一个stackoverflow问题，我很乐意看一看。干杯