Динамическое создание выпадающего меню TinyMCE

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.

Я нашел похожий вопрос здесь: Добавление настраиваемого раскрывающегося меню в tinyMCE и вставка динамического содержимого , но оно относится к TinyMCE 4, и, к сожалению, предоставленный ответ не работает для TinyMCE 5.

Спасибо за вашу помощь!

Answer 1

У меня была такая же проблема.Я решил это используя значение + 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);
      },
    });
  }
});