Question

我试图在TinyMCE中使用从数组派生的选项创建工具栏按钮。我已经按照Tiny网站上的示例进行操作，并且该按钮已按预期生成。这是代码：

var mergeFields = {one: "first", two: "second", three: "third"};

tinymce.init({
selector: 'textarea',
menubar: false,
toolbar: 'mergefields',
setup: function (editor) {
    editor.ui.registry.addMenuButton('mergefields', {
        text: 'Merge Fields',
        fetch: function (callback) {
            var items = [];
            for (var fieldName in mergeFields) {
                var menuItem = {
                    type: 'menuitem',
                    text: mergeFields[fieldName],
                    onAction: function() {
                        // The problem: this function always inserts the last element of the array
                        // instead of the expected fieldName associated with this menuItem
                        editor.insertContent(fieldName);
                    },
                };
                items.push(menuItem);
            }
            callback(items);
        },
    });
}
});

<script src="https://cloud.tinymce.com/5/tinymce.min.js?apiKey=XXXXX"></script>

<textarea>Editor</textarea>

选择其中一个选项并执行分配给onAction属性的匿名函数时会发生问题-它总是在文档中插入“三”（大概是因为在遍历整个数组之后，fieldName设置为“三” ”）。如何使onAction处理程序将正确的值插入文档中？

这需要在TinyMCE 5中工作。

我在这里找到了类似的问题：Adding custom dropdown menu to tinyMCE and insert dynamic contents，但这是指TinyMCE 4，很遗憾，所提供的答案不适用于TinyMCE 5。

感谢您的帮助！

Answer 1

我有同样的问题。我用value + onSetup

解决了

https://jsfiddle.net/stvakis/tjh7k20v/8/

var mergeFields = {
  one: "first",
  two: "second",
  three: "third"
};

tinymce.init({
  selector: 'textarea',
  menubar: false,
  toolbar: 'mergefields',
  setup: function(editor) {
    editor.ui.registry.addMenuButton('mergefields', {
      text: 'Merge Fields',
      fetch: function(callback) {
        var items = [];
        for (var fieldName in mergeFields) {
          var menuItem = {
            type: 'menuitem',
            text: mergeFields[fieldName],
            value:fieldName,
            onSetup: function(buttonApi) {
              var $this = this;
              this.onAction = function() {
                editor.insertContent($this.data.value);
              };
            },
          };
          items.push(menuItem);
        }
        callback(items);
      },
    });
  }
});

动态生成TinyMCE下拉菜单

1 个答案: