如何将工具栏按钮添加到自定义 tinymce 下拉菜单中？

Question

我在 tinymce 中创建了一个自定义下拉菜单，如下所示：

tinymce.init({
    toolbar: "alignment",

    setup: function(editor) {
        editor.addButton('alignment', {
            type: 'menubutton',
            text: 'Alignment',
            icon: false,
            menu: [
                { text: 'left', onclick: function() {tinymce.activeEditor.formatter.toggle('alignleft');}},
                { text: 'center', onclick: function() {tinymce.activeEditor.formatter.toggle('aligncenter');}},
                { text: 'right', onclick: function() {tinymce.activeEditor.formatter.toggle('alignright');}},
                { text: 'justify', onclick: function() {tinymce.activeEditor.formatter.toggle('alignjustify');}},
            ]
        });

    }

});

创建这个：

但是我想要的是将对齐按钮从下拉菜单的主工具栏中移开。

如何将工具栏中的这些实际按钮放入下拉菜单中？是像上面的代码还是完全不同的方式？

所以基本上将这些按钮放在上面的下拉列表中，并带有打开和关闭的切换状态。

Answer 1

试试这个设置 - Plunker

tinymce.init({
    selector: "textarea",
    toolbar: "styleselect | bold italic | alignment | alignmentv2",
    setup: function(editor) {
      editor.addButton('alignment', {
          type: 'listbox',
          text: 'Alignment',
          icon: false,
          onselect: function(e) {
            tinyMCE.execCommand(this.value());
          },
          values: [
              {icon: 'alignleft', value: 'JustifyLeft'},
              {icon: 'alignright', value: 'JustifyRight'},
              {icon: 'aligncenter', value: 'JustifyCenter'},
              {icon: 'alignjustify', value: 'JustifyFull'},
          ],
          onPostRender: function() {
            // Select the firts item by default
            this.value('JustifyLeft');
          }
      });

      editor.addButton('alignmentv2', {
            type: 'menubutton',
            text: 'Alignment v2',
            icon: false,
            menu: [
                {icon: 'alignleft', onclick: function() { console.log(editor); tinyMCE.execCommand('JustifyLeft'); }},
                {icon: 'alignright', onclick: function() { tinyMCE.execCommand('JustifyRight'); }}
            ]
        });
    }
});

Answer 2

@NoBugs，你可以增强onselect方法来执行对齐图标更新。

首先，通过检查 onselect 方法中 this 对象的结构，我们将看到 this.settings.values 属性存储了一个具有早期定义值的数组。

通过使用许多 find 实用函数之一，我们获得了选定的值项并根据需要更新图标：

onselect: function() {
  selectedItem = find(this.settings.values, {value: this.value()})
  this.icon(selectedItem.icon)
  tinyMCE.execCommand(this.value());
}

希望这对您有所帮助。干杯！

Answer 3

这可能最好使用自定义拆分按钮来解决。这样我们就可以将最后一个 selected 选项分配给主按钮。

在此处查看结果 - CodePen

tinymce.init({
  selector: '#editor',
  menubar: false,
  toolbar: 'bold italic underline | alignmentsplit | bullist numlist outdent indent',

  setup: function (editor) {
    editor.on('init', function() {
      this.getDoc().body.style.fontSize = '16px';
      this.getDoc().body.style.fontFamily = 'Georgia';
    });
    editor.addButton('alignmentsplit', {
      type: 'splitbutton',
      text: '',
      icon: 'alignleft',
      onclick: function(e) {
        tinyMCE.execCommand(this.value);
      },
      menu: [{
          icon: 'alignleft',
          text: 'Align Left',
          onclick: function() {
            tinyMCE.execCommand('JustifyLeft');
            this.parent().parent().icon('alignleft');
            this.parent().parent().value = 'JustifyLeft'
          }
        }, {
          icon: 'alignright',
          text: 'Align Right',
          onclick: function() {
            tinyMCE.execCommand('JustifyRight');
            this.parent().parent().icon('alignright');
            this.parent().parent().value = 'JustifyRight';
          }
        }, {
          icon: 'aligncenter',
          text: 'Align Center',
          onclick: function() {
            tinyMCE.execCommand('JustifyCenter');
            this.parent().parent().icon('aligncenter');
            this.parent().parent().value = 'JustifyCenter';
          }
        }, {
          icon: 'alignjustify',
          text: 'Justify',
          onclick: function() {
            tinyMCE.execCommand('JustifyFull');
            this.parent().parent().icon('alignjustify');
            this.parent().parent().value = 'JustifyFull';
          }
        }
      ],
      onPostRender: function() {
        // Select the first item by default
        this.value ='JustifyLeft';
      }
    });
  }
});

注意： 如果您重新select 内容上的对齐选项，TinyMCE 会关闭对齐格式。这是默认的 TinyMCE 行为，但您需要通过按钮上的切换状态指示该部分已经具有该格式，以便对用户更有意义。上面没有实现。

如何将工具栏按钮添加到自定义 tinymce 下拉菜单中？

How do I add toolbar buttons to a custom tinymce dropdown menu?

javascript

jquery

tinymce

rich-text-editor

tinymce-4