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

时间:2011-10-14 03:43:22

标签: javascript plugins 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');
            }
        });
    } 
});

2 个答案:

答案 0 :(得分:12)

我想我刚刚解决了这个问题。

像这样更改你的初始化:

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对象本身

希望这有帮助,它对我来说很好用!

埃尔切

答案 1 :(得分:0)

我找不到有关richcombo的有用文档,我查看了源代码并了解了我需要的事件。

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

// in your activity onCreate
ctx = YourActivity.this; // let's suppose ctx is static and general var
////////////////////////////////////////////////
// in the BroadcastReceiver
AlertDialog.Builder dialogBuilder = new AlertDialog.Builder(YourActivity.ctx);

注意 以上所有代码都在addRichCombo init回调

  • 我删除了" panelHide"中的组合框内容。事件
  • 我在" panelShow"上重新填充组合框。事件

希望这有帮助