如何将工具栏按钮添加到自定义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

这可能是使用自定义拆分按钮最好解决的问题。这样我们可以将最后选择的选项分配给主按钮。

在这里看到的结果 - 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'; 
     } 
    }); 
    } 
}); 

注：如果重新选择在已经对准这样内容的对齐选项，TinyMCE的切换对齐格式了。这是默认的TinyMCE行为，但您需要通过按钮上的切换状态指示该部分已经具有该格式，以便使用户更有意义。这尚未在上面实施。