动态将多个菜单项添加到下拉菜单-所有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);。当我们循环执行时，它只会找到该代码的一行。这就是为什么单击任何菜单项仅单击最后一个菜单项的原因，因为此代码在循环结束时被最后一个项目覆盖。所以，我这样解决。我将每个菜单项的editor.addMenuItem()代码连接为字符串。然后，使用setup :function (editor){} of tinymce.init({})在eval()中执行该字符串。这样，当我们单击菜单项时，它可以找到特定菜单项的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>