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

    }

});

这会创建这样的内容：

然而，我想要的只是将对齐按钮从主工具栏移动到下拉菜单中。

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

因此，基本上是将这些按钮放在上面的下拉菜单中，并提供开和关的切换状态。

- CafeHey

---

你使用的是哪个版本的TinyMCE？ - alex

这是最新的版本4.1.7。 - CafeHey

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'); }}
            ]
        });
    }
});

- sbedulin

---

不仅在下拉列表未显示时不显示当前对齐方式图标，而且在弹出下拉列表时无法选择所选行的正确对齐方式。 - NoBugs

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());
}

希望这可以帮到您。干杯！

- Roman Vasyliev

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行为，但您需要通过按钮的切换状态指示该部分已经具有该格式，以便更容易理解。上面未实现此功能。

- Alan Gill