TinyMce: динамически добавлять несколько выпадающих меню с настраиваемым действием кнопок для элементов

Question

Я пробовал и искал несколько дней и не смог заставить это работать.

Идея состоит в том, чтобы динамически добавлять выпадающие меню из массива с настраиваемым действием для элементов. Я могу добавить выпадающие списки и пункты меню, но не могу настроить пользовательское действие для кнопок.

Я обнаружил, что ошибка связана с анонимной функцией. Я пробовал много вещей, чтобы решить это, но я застрял с этим и не могу решить это. Любая идея, как ее решить, будет оценена.

У меня есть массив вроде:

function loadTinyMCE(myselector, extraOptions){
	console.log('loadTinyMCE '+myselector);

	var basicButtons = "undo redo | bold italic underline | forecolor backcolor | table | link unlink  | image media | code";

	var tinyOptions = {
		selector: myselector,
		theme: "silver",
		width: '100%',
		menubar: false,
		plugins: [
			"advlist autolink link image media code",
			"autoresize table"
		],
		autoresize_on_init: true,
		toolbar: basicButtons,
		image_advtab: true,
		external_plugins: {
		},
		init_instance_callback: function (editor) {
		    editor.on('Change', function (e) {
		    	editor.save();
		    	var a = editor.getElement();
		    	$(a).trigger('change');
		    });
		}
	};


	var varsDocument = {
		'Dropdown1': [
					{Code:'Item1', Type:'Text', Name:'Item one'},
					{Code:'Item2', Type:'Text', Name:'Item two'},
				]
		,
		'Dropdown2': [
					{Code:'Item3', Type:'Image', Name:'Item 3 Image'},
					{Code:'Item4', Type:'Text', Name:'Item four'},
				]
		,
		'Dropdown3': [
					{Code:'Item5', Type:'Div', Name:'Item5 Div'},
				]
		
	};



/* Helper functions */
function docVariable(varName, varType) {
  	return '<span class="docVariable docElement docVariableType'+varType+'">' + varName + '</span>';
};


function getItemsGroup(group, editor){
	var itemsGroup = [];
	if(varsDocument.hasOwnProperty(group)){
	  	for(var itemKey in varsDocument[group]){
	  		var obj = 
            {
				'type': 'menuitem',
				'text': varsDocument[group][itemKey]['Name'],
				'code': varsDocument[group][itemKey]['Code'],
				'typevar': varsDocument[group][itemKey]['Type'],
				onAction: function(){
							editor.insertContent( docVariable(this.code, this.typevar) );
	      				},

            };

			itemsGroup.push(obj);
	  	}

	  	return itemsGroup;
	}

}


function getItemsVariables(editor){
	var groups = [];
  	for(var group in varsDocument){
  		//console.log(group);
			groups.push(
				{
      			'type': 'nestedmenuitem',
      			'text': group,
      			'group': group,
      			getSubmenuItems: function () {
      				var items = getItemsGroup(this.group, editor);
	      			return items;

		        }
      		}
      	);
  	}
  	return groups;
}


	tinyOptions['setup'] = function (editor) {

	    editor.ui.registry.addMenuButton('menuVariables', {
	      text: '{:Variables:}',
	      fetch: function (callback) {
	        callback( getItemsVariables(editor) );
	      }
	    });

	    /**
	     * 
	     */
	    editor.on('click', function(e) {
	    	var node = tinymce.activeEditor.selection.getNode();
	    	if( $(node).hasClass('docElemento')){
	    		tinymce.activeEditor.selection.select(node, true);
	    	}
	    });




	};
	
	tinyOptions['toolbar'] = 'menuVariables'+' | '+basicButtons;
	
	tinyOptions['content_css'] = '/css/documentacion.css';

	if(typeof extraOptions !== typeof undefined){
		if(typeof extraOptions == 'object' && Object.keys(extraOptions).length > 0){
			for(const [key, value] of Object.entries(extraOptions)){
				tinyOptions[key] = value;
			}
			//tinyOptions = Object.assign(tinyOptions, extraOptions);
		}
	}

	//console.log(tinyOptions);

	tinymce.init(tinyOptions);
}