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

Question

我的页面上有一个表单,包含textarea(CKEDITOR)和select字段<select id="_photogalleries" multiple="multiple"></select>.我希望RichCombo中的选项依赖于select with 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属性的项目数组,但可以轻松更改.