如何將工具欄按鈕添加到自定義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行爲，但您需要通過按鈕上的切換狀態指示該部分已經具有該格式，以便使用戶更有意義。這尚未在上面實施。