如何將工具欄按鈕添加到自定義的下拉菜單中？

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行為，但您需要通過按鈕上的切換狀態指示該部分已經具有該格式，以便對用戶更有意義。 這還沒有在上面實現。