3

我的页面上有一个带有 textarea (CKEDITOR) 和 select field 的表单<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');
                }
            });
        }
});
4

3 回答 3

5

这对我有用，您不必保留全局变量。

    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 属性的项目，但可以轻松更改。

于 2013-05-15T03:27:19.430 回答
0

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

于 2012-12-21T15:29:50.773 回答
0

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

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");
于 2016-10-05T12:47:59.397 回答