javascript - 如何将工具栏按钮添加到自定义 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'); }}
            ]
        });
    }
});