Динамическое меню для окна 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/