Javascript 是否可以重新初始化CKEditor组合框/下拉菜单？

如何在下拉列表中动态更新项目

我有一个自定义的CKEditor插件，它填充了一个下拉菜单，其中有一个项目列表，我可以将这些项目插入我的

textarea

这个项目列表来自一个名为

maptags

的Javascript数组，该数组为每个页面动态更新

var maptags = []

当您第一次通过

init:

函数单击下拉列表时，该标签列表将添加到下拉列表中。我的问题是，当客户端更改页面上的内容时，如果该数组中的项目发生更改，我如何将该列表重新加载到更新的数组中

以下是我的CKEditor插件代码：

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”，因此每当触发重建列表时，它都会引用richcombo对象本身，而我无法通过任何其他方式获得它

希望这有帮助，它对我很好

---

ElChe

我在richcombo周围找不到任何有用的文档，我查看了源代码，了解了我需要的事件

@El-Che解决方案帮助我解决了这个问题，但我有另一种解决方法，因为我有一个更复杂的组合框结构（搜索、组）

var\u this=this；
populateCombo.call（_this，data）；
函数populateCombo（数据）{
/*我在这里添加了一个搜索解决方案*/
this.startGroup（'Default'）；/*创建默认组*/
/*用你的逻辑添加项目*/
对于（变量i=0；i

注意 以上所有代码都在addrichcomboinit回调中

• 我删除“panelHide”事件的组合框内容
• 我在“panelShow”活动中重新填充组合框

---

希望这有帮助

此解决方案适用于静态数据，但当我尝试使用上述解决方案处理从服务器获取的数据时，它显示为空白。你能帮忙吗？从服务器上获取你的项目，例如从Ajax调用，并将它们放在“yourListOfItems”列表中这有点混乱，但它让我走上了正确的道路。谢谢p、 richCombo对象的结构很奇怪，很恶心，这个功能应该是richCombo的一部分，而不是从外部侵入。

            var _this = this;
                populateCombo.call(_this, data);

                function populateCombo(data) {
                    /* I have a search workaround added here */

                    this.startGroup('Default'); /* create default group */

                    /* add items with your logic */
                    for (var i = 0; i < data.length; i++) {
                        var dataitem = data[i];
                        this.add(dataitem.name, dataitem.description, dataitem.name);
                    }

                    /* other groups .... */
                }

                var buildListHasRunOnce = 0;
                /* triggered when combo is shown */
                editor.on("panelShow", function(){
                    if (buildListHasRunOnce) {
                        // reset list
                        populateCombo.call(_this, data);
                    }
                    buildListHasRunOnce = 1;
                });

                /* triggered when combo is hidden */
                editor.on("panelHide", function(){
                    $(_this._.list.element.$).empty();
                    _this._.items = {};
                    _this._.list._.items = {};
                });