Generating TinyMCE drop-down menu dynamically

Question

I am trying to create toolbar button in TinyMCE with options that are derived from the array. I've followed the examples on Tiny's website and the button is getting generated as expected. Here is the code:

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>

The problem happens when one of the options is selected and the anonymous function assigned to onAction property is executed -- it always inserts "three" into the document (presumably because after running through the whole array, fieldName is set to "three"). How can I make the onAction handler insert the right value into the document?

This needs to work in TinyMCE 5.

I've found a similar question here: Adding custom dropdown menu to tinyMCE and insert dynamic contents, but it was referring to TinyMCE 4 and unfortunately the provided answer does not work for TinyMCE 5.

Thanks for your help!

Answer 1

I had the same problem. I solved it using 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);
      },
    });
  }
});