如何在CKEDITOR中动态生成RichCombo的选项？

Question

我的页面上有一个表格，包括textarea（CKEDITOR）和选择字段<select id="_photogalleries" multiple="multiple"></select> 。 我希望RichCombo中的选项依赖于在id #_photogalleries中选择的选项。 有没有办法动态重新生成RichCombo？ 提前致谢。

CKEDITOR.plugins.add('style_plugin', {
        requires: ['richcombo'],
        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');
                }
            });
        }
});

Answer 1

这适用于我，你不必保持一个全局变量。

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

然后设置函数以将数据放在设置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;
                            };
                        });

它假设您带回一个json响应，该响应具有一个具有value属性的项目数组，但可以轻松更改。

Answer 2

我想我找到了一个适合我的解决方案。 将列表对象保留在全局变量中，然后在外部选择中触发onchange事件时修改它。

Answer 3

我用一行解决了这个问题：

YOURCOMBO.createPanel(editor);

例如：

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

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

现在您可以将项目添加到组合中

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

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

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