Динамическое меню для окна RichCombo в CKEditor

Я написал плагин, который добавляет ящик RichCombo к моему CKEditor. Я хочу иметь возможность обновлять содержимое в ListBox в этом RichCombo

Вот мой код.

var merge_fields = [];

CKEDITOR.plugins.add('mergefields',
{
    requires: ['richcombo'], //, 'styles' ],
    init: function (editor) {
        var config = editor.config,
           lang = editor.lang.format;

        // Gets the list of tags from the settings.
        var tags = merge_fields; //new Array();

        // Create style objects for all defined styles.
        editor.ui.addRichCombo('tokens',
        {
            label: "Merge",
            title: "title",
            voiceLabel: "voiceLabel",
            className: 'cke_format',
            multiSelect: false,

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

            init: function () {
                // this.startGroup("mergefields");
                for (var this_tag in tags) {
                    this.add(tags[this_tag], tags[this_tag], tags[this_tag]);
                }
            },

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

К сожалению, этот список не обновляется при изменении merge_fields. Есть ли способ повторно инициализировать плагин или не удалять его и повторно добавлять с обновленным контентом?

Примечание. Идентификатор предпочитает НЕ удалять весь редактор и заменять его, так как это выглядит очень неприятным для пользователя.

UPDATE

В соответствии с запросом, здесь jsfiddle поможет

http://jsfiddle.net/q8r0dkc4/

В этом JSFiddle вы увидите, что при динамическом создании меню при первом обращении к нему. Он должен содержать флажки, которые выбраны. Однако, каждый последующий доступ к нему, он сохраняет те же значения и не обновляется. Единственный способ его обновления - повторно инициализировать редактор, используя кнопку повторного ввода, которую я предоставил, но это приводит к тому, что редактор исчезает и снова появляется, поэтому я не хочу этого делать.

200 баллов щедрости тому, кто может сделать выпадающее динамическое обновление КАЖДОГО ВРЕМЕНИ, он называется.

Ответ 1

Как использовать пользовательские события CKEditors примерно так?

Сначала получите ссылку на экземпляр CKEditors

var myinstance = CKEDITOR.instances.editor1;

Поскольку флажки не входят в область CKEditor, добавьте обработчик изменений в флажки

$(':checkbox').change(function () {
    myinstance.fire('updateList'); // here is where you will fire the custom event
});

Внутри определения плагина добавьте прослушиватель событий в редакторе, как это

editor.on("updateList", function () { // this is the checkbox change listener
  self.buildList(); // the entire build is created again here
});

Вместо прямого добавления событий на флажках (которые находятся вне области CKEditor) внутри плагина, я использую специальные события CKEditor. Теперь экземпляр редактора и флажки разделены.

Вот DEMO

Надеюсь, что это поможет

Update

Вариант 2

Способы плагинов можно непосредственно вызывать как

$(':checkbox').change(function () {
    CKEDITOR.instances.editor1.ui.instances.Merge.buildList(); //this method should build the entire list again
});

Даже если это кажется очень простым, я не думаю, что он полностью развязан. (Но все еще работает)

Вот демон для варианта 2

Ответ 2

Думаю, у меня есть для вас проблема.

В вашей функции richCombo init добавьте эту строку: $('input').on('click', rebuildList);

Довольно простое исправление JQuery, но каждый раз, когда я нажимаю эти поля ввода, он перестраивает список.

Скрипт для доказательства: https://jsfiddle.net/q8r0dkc4/7/