Is It Possible To Reinitialize A CKEditor Combobox/Drop Down Menu?

How do I dynamically update the items in a drop down? I have a custom plugin for CKEditor that populates a drop down menu with a list of items which I can inject into my textarea.

Solution 1:

I think I just solved this actually.

Change your init like this:

init: function () {
                var rebuildList = CKEDITOR.tools.bind(buildList, this);
                rebuildList();
                $(editor).bind('rebuildList', rebuildList);
            },

And define the buildList function outside that scope.

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;
        };

The clever thing about the CKEDITOR.tools.bind function is that we supply "this" when we bind it, so whenever the rebuildList is triggered, this refer to the richcombo object itself which I was not able to get any other way.

Hope this helps, it works fine for me!

ElChe

Solution 2:

I could not find any helpful documenatation around richcombo, i took a look to the source code and got an idea of the events i needed.

@El Che solution helped me to get through this issue but i had another approach to the problem because i had a more complex combobox structure (search,groups)

            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 = {};
                });

NOTE All above code is inside addRichCombo init callback

• I remove combobox content on "panelHide" event
• I repopulate combobox on "panelShow" event

Hope this helps