tinymce dynamic add multiple menu items to dropdown menu-full onclick 直接点击最后一个菜单项

Question

我正在使用 tinymce + tinymce-variable。我想创建具有动态菜单项的下拉菜单。基于 sql 中的项目，我能够创建多个下拉菜单。我在循环中使用 editor.addMenuItem() 创建了每个菜单项。

for(i=0;i<data.length;i++)
{
    template_var    =data[i]['variable'];       
    text_val        =template_var.replace(/\s/g , " ");
    editor.addMenuItem(template_var,
    {
        text    :text_val,
        context :'newmenu',
        onclick :function ()
        {               
            editor.plugins.variable.addVariable(template_var);
        }
    })
}

我面临的问题是，当我单击任何菜单项时，它会将最后一个菜单项添加到编辑器，而不是我单击的菜单项。我猜，它 overwrite the editor.plugins.variable.addVariable(template_var); to last menu item for all menu item。这怎么可能？

提前致谢。

Answer 1

单击菜单项直接转到特定菜单项的特定行 editor.plugins.variable.addVariable(template_var);。当我们在循环中执行时，它只找到一行 code.That 这就是为什么点击任何菜单项只对最后一个菜单项执行点击，因为这段代码在循环结束时被最后一个项目覆盖。所以，我是这样解决的。我将每个菜单项的 editor.addMenuItem() 代码连接为 string.Then，我使用 eval() 在 setup :function (editor){} of tinymce.init({}) 中执行该字符串。这样，当我们点击菜单项时，它可以找到特定菜单项的editor.plugins.variable.addVariable(template_var);。

<script type="text/javascript">
variablenames_concat='';
addmenu_concat      ='';
for(j=0;j<data.length;j++)
        {
            variablenames_concat+=data[j]['variable']+',';
            template_var        =data[j]['variable'];
            text_val            =template_var.replace(/\s/g , " ");//remove underscore
            //string concatenate editor.addMenuItem for each of item 
            addmenu_concat      +='editor.addMenuItem("'+template_var+'",{text  : "'+text_val+'",context: "newmenu",onclick: function (){editor.plugins.variable.addVariable("'+template_var+'");}});';
        }
variablenames_concat = variablenames_concat.replace(/,\s*$/, "");//remove last coma

tinymce.init
({
  selector  : 'textarea',
  height    :  500, 
  plugins   : 'variable',
  menu      :
            {
                newmenu:
                {
                    title : 'Menu', items : variablenames_concat,           
                }
            },
 content_css: 
            [
                '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
                '//www.tinymce.com/css/codepen.min.css'
            ],
content_style:".variable{cursor:default;background-color:#65b9dd;color:#FFF;padding:2px;border-radius:3px;font-weight: bold;font-style:normal;display:inline-block;}",


setup        : function (editor)
                    {
                      eval(addmenu_concat);
                    }
});
</script>

tinymce dynamic add multiple menu items to dropdown menu-full onclick 直接点击最后一个菜单项

tinymce dynamic add mutiple menu items to dropdown menu-all onclick direct to last menu item click

javascript

for-loop

tinymce

editor

tinymce-4