如何动态更新下拉菜单中的项目？
我有一个CKEditor的自定义插件,它填充了一个下拉菜单,其中包含我可以注入我的textarea的项目列表.
这个项目列表来自一个名为maptags的Javascript数组,它为每个页面动态更新.
var maptags = []
当您首次通过init：函数单击它时,此标记列表将添加到下拉列表中.我的问题是,如果客户端更改页面上的内容,该数组中的项目会发生变化,如何将该列表重新加载到更新的数组？
CKEDITOR.plugins.add('mapitems',{
requires: ['richcombo'],//,'styles' ],init: function (editor) {
var config = editor.config,lang = editor.lang.format;
editor.ui.addRichCombo('mapitems',{
label: "Map Items",title: "Map Items",voiceLabel: "Map Items",className: 'cke_format',multiSelect: false,panel:
{
css: [config.contentsCss,CKEDITOR.getUrl(editor.skinPath + 'editor.css')],voiceLabel: lang.panelVoiceLabel
},init: function () {
this.startGroup("Map Items");
//this.add('value','drop_text','drop_label');
for (var this_tag in maptags) {
this.add(maptags[this_tag][0],maptags[this_tag][1],maptags[this_tag][2]);
}
},onClick: function (value) {
editor.focus();
editor.fire('saveSnapshot');
editor.insertHtml(value);
editor.fire('saveSnapshot');
}
});
}
});
解决方法
我想我刚刚解决了这个问题.
像这样更改你的init：
init: function () {
var rebuildList = CKEDITOR.tools.bind(buildList,this);
rebuildList();
$(editor).bind('rebuildList',rebuildList);
},
并在该范围之外定义buildList函数.
var buildListHasRunOnce = 0;
var buildList = function () {
if (buildListHasRunOnce) {
// Remove the old unordered list from the dom.
// This is just to cleanup the old list within the iframe
$(this._.panel._.iframe.$).contents().find("ul").remove();
// reset list
this._.items = {};
this._.list._.items = {};
}
for (var i in yourListOfItems) {
var item = yourListOfItems[i];
// do your add calls
this.add(item.id,'something here as html',item.text);
}
if (buildListHasRunOnce) {
// Force CKEditor to commit the html it generates through this.add
this._.committed = 0; // We have to set to false in order to trigger a complete commit()
this.commit();
}
buildListHasRunOnce = 1;
};
关于CKEDITOR.tools.bind函数的聪明之处在于我们在绑定它时提供“this”,因此每当触发rebuildList时,这都引用了我无法通过其他任何方式获得的richcombo对象.
希望这有帮助,它对我来说很好！
埃尔切
