There is a form on my page with textarea (CKEDITOR) and select field <select id="_photogalleries" multiple="multiple"></select>. I'd like options in RichCombo to depend on the options that are selected in select with id #_photogalleries. Is there any way to regenerate RichCombo dynamically? Thanks in advance.

CKEDITOR.plugins.add('style_plugin', {
        requires: ['richbo'],
        init: function(editor) {
            var pluginName = 'style_plugin';
            var config = editor.config,
                lang = editor.lang.format;

            editor.ui.addRichCombo('photogalleries', {
                label: "Фоторепортаж",
                title: "Фоторепортаж",
                voiceLabel: "Фоторепортаж",
                className: 'cke_format',
                multiSelect: false,
                icon: CKEDITOR.plugins.getPath('style_plugin') + 'photo-list-horizontal.png',

                panel: {
                    css: [config.contentsCss, CKEDITOR.getUrl(editor.skinPath + 'editor.css')],
                    voiceLabel: lang.panelVoiceLabel
                },

                init: function () {
                    this.startGroup("Фоторепортаж");
                    var list=this;
                    $("#_photogalleries option:selected").each(function(index, value){
                        console.log(index, value);
                        list.add("#HORIZONTAL_GALLERY_"+ $(value).val()+"#", "(Г) " + $(value).text(), "(Г) " + $(value).text());
                        list.add("#VERTICAL_GALLERY_"+ $(value).val()+"#",   "(В) " + $(value).text(), "(В) " + $(value).text());
                    });
                },

                onClick: function (value) {
                    editor.focus();
                    editor.fire('saveSnapshot');
                    editor.insertHtml(value);
                    editor.fire('saveSnapshot');
                }
            });
        }
});

There is a form on my page with textarea (CKEDITOR) and select field <select id="_photogalleries" multiple="multiple"></select>. I'd like options in RichCombo to depend on the options that are selected in select with id #_photogalleries. Is there any way to regenerate RichCombo dynamically? Thanks in advance.

CKEDITOR.plugins.add('style_plugin', {
        requires: ['richbo'],
        init: function(editor) {
            var pluginName = 'style_plugin';
            var config = editor.config,
                lang = editor.lang.format;

            editor.ui.addRichCombo('photogalleries', {
                label: "Фоторепортаж",
                title: "Фоторепортаж",
                voiceLabel: "Фоторепортаж",
                className: 'cke_format',
                multiSelect: false,
                icon: CKEDITOR.plugins.getPath('style_plugin') + 'photo-list-horizontal.png',

                panel: {
                    css: [config.contentsCss, CKEDITOR.getUrl(editor.skinPath + 'editor.css')],
                    voiceLabel: lang.panelVoiceLabel
                },

                init: function () {
                    this.startGroup("Фоторепортаж");
                    var list=this;
                    $("#_photogalleries option:selected").each(function(index, value){
                        console.log(index, value);
                        list.add("#HORIZONTAL_GALLERY_"+ $(value).val()+"#", "(Г) " + $(value).text(), "(Г) " + $(value).text());
                        list.add("#VERTICAL_GALLERY_"+ $(value).val()+"#",   "(В) " + $(value).text(), "(В) " + $(value).text());
                    });
                },

                onClick: function (value) {
                    editor.focus();
                    editor.fire('saveSnapshot');
                    editor.insertHtml(value);
                    editor.fire('saveSnapshot');
                }
            });
        }
});

• javascript
• ckeditor

3 Answers 3

This works for me and you dont have to keep a global variable.

    CKEDITOR.plugins.add('systemdata', {
        init: function (editor) {

            var fnData = editor.config.fnData;

            if (!fnData || typeof (fnData) != 'function')
                throw "You must provide a function to retrieve the list data.";

            editor.ui.addRichCombo('systemDataCmb',
                {
                    allowedContent: 'abbr[title]',
                    label: "System Data",
                    title: "System Data",
                    multiSelect: false,
                    init: function () {

                        var self = this;

                        var content = fnData();

                        $.each(content, function(index, value) {
                            // value, html, text
                            self.add(value.name, value.name, value.name)
                        });
                    }
}

Then to set the function to get the data put this somewhere where you setup the ckeditor

 CKEDITOR.replaceAll(function(element, config) {
                            config.startupFocus = true;
                            config.fnData = function() {

                                var returnData = null;

                                $.ajax({
                                    url: "/GetData",
                                    async: false,
                                    data: { id: 1 },
                                }).done(function(result) { returnData= result; });

                                return returnData;
                            };
                        });

It assumes you bring back a json response that has an array of items that have a value property, that can be easily changed though.

I guess I found a solution that worked for me. It was to keep a list object in a global variable and then modify it when onchange event fires in the external select.

I solved this trouble with a single line:

YOURCOMBO.createPanel(editor);

For example:

var boTeam = editor.ui.get("team"); 

boTeam.createPanel(editor);//This is important, if not, doesnt works

Now you can add items to the bo

boTeam.add("name","name","name");

boTeam.add("name2","name2","name2");

boTeam.add("name3","name3","name3");