tinymce - TinyMCE SplitButton 中的所有菜单项都使用相同的回调

Question

我在 TinyMCE 中创建了一个 SplitButton，我正在使用 for 循环来添加按钮，但出于某种原因，按钮的 onclick 总是调用同一个按钮(for 循环中的最后一个)。似乎每次我添加菜单选项时，回调都会被覆盖。

让我描述一下我的意思。

var c = cm.createSplitButton('optionsList', {
title : 'Options',
});

c.onRenderMenu.add(function(c, m){
var Opts1 = options[0];
var Opts2 = options[1];
var Opts3 = options[2];

var sub1 = m.addMenu({title: "Options 1"});
for(var x in Opts1){
    sub1.add({title: Opts1[x], onclick: function(){
        tinyMCE.activeEditor.execCommand('mceInsertContent',false,Opts1[x]);
    }});
}

var sub2 = m.addMenu({title: "Options 2"});
for(var y in Opts2){
    sub2.add({title: Opts2[y], onclick: function(){
        tinyMCE.activeEditor.execCommand('mceInsertContent',false,Opts2[y]);
    }});
}

var sub3 = m.addMenu({title: "Options 3"});
for(var z in Opts3){
    sub3.add({title: Opts3[z], onclick: function(){
        tinyMCE.activeEditor.execCommand('mceInsertContent',false,Opts3[z]);
    }});
}

});

菜单创建正确，但例如，如果我选择“选项 1”并选择任何选项，tinyMCE 将打印该子菜单中的最后一个选项。我不知道如何解决这个问题。

Answer 1

我修复了它，所以我会回答我自己的问题。我需要使用闭包。解决方案是:

var insertVar = function(val){
    return function(){tinyMCE.activeEditor.execCommand('mceInsertContent',false,val);}
};

var sub1 = m.addMenu({title: "Options 1"});
for(var x in Opts1){
    var variable = insertVar(Opts1[x]);
    sub1.add({title: Opts1[x], onclick: variable});
}