动态生成 TinyMCE 下拉菜单答案

【问题标题】：Generating TinyMCE drop-down menu dynamically动态生成 TinyMCE 下拉菜单
【发布时间】：2019-04-05 21:59:19
【问题描述】：

我正在尝试使用从数组派生的选项在 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。

感谢您的帮助！

【问题讨论】：

需要更好地理解预期行为。当脚本运行时，它设置为 3，因为这是最后一个值，循环的每次迭代都会覆盖前一个值。
脚本创建一个包含三个选项的下拉菜单。单击第一个选项时，需要在文档中插入“一个”（第二个选项需要插入“两个”）。相反，它总是插入“三个”。
在您引用的问题中，答案提供了一个小提琴。我建议你也这样做。
总是使用值 3，因为 fieldName 是闭包范围内的变量（即函数 fetch）。 fieldName 被提升到其范围的顶部，并采用最后一次迭代的值。 onAction 在循环执行后调用，因此 fieldName 始终为 3。

标签： javascript tinymce

【解决方案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);
      },
    });
  }
});

【讨论】：