Для динамического добавления данных в `addRichCombo` в CKEditor 4, вам нужно выполнить два шага. Во-первых, создать механизм, который позволит вам обновлять данные при каждом открытии выпадающего списка. Во-вторых, реализовать функционал обновления элементов `addRichCombo` на основе этих данных.
Давайте рассмотрим пример подхода, как это можно сделать:
1. Регистрируйте свой плагин с custom combo box используя `addRichCombo`. В качестве примера базовая структура плагина:
```javascript
CKEDITOR.plugins.add('customRichCombo', {
requires: 'richcombo',
init: function(editor) {
editor.ui.addRichCombo('customCombo', {
label: 'Custom Combo',
title: 'Custom Combo',
multiSelect: false,
panel: {
// Panel configuration
},
init: function() {
// Здесь инициализируйте начальные значения при загрузке редактора, если необходимо
},
onClick: function(value) {
// Событие при выборе значения из выпадающего списка
editor.focus();
console.log(value);
},
onRender: function() {
// Логика рендеринга, вызывается при первом открытии списка
}
});
}
});
```
2. Динамическое добавление элементов в событии `onOpen` `richcombo`:
```javascript
editor.ui.addRichCombo('customCombo', {
// ... предыдущая конфигурация ...
onOpen: function() {
// Получаем ссылку на richCombo
var combo = this;
// Очищаем все существующие опции
combo.startGroup("Custom Items");
combo.clear();
// Здесь ваш код для получения новых элементов, например, отправка AJAX-запроса или чтение данных
var dropdownItems = getDropdownItems(); // функция, которая получает новые данные для dropdown
// Динамическое добавление элементов
for(var i = 0; i < dropdownItems.length; i++) {
var item = dropdownItems[i];
combo.add(item.value, item.text, item.text);
}
},
// ... остальная конфигурация ...
});
```
Функция `getDropdownItems()` должна возвращать массив элементов, которые вы хотите добавить в выпадающий список. Это может быть статический массив или данные, полученные асинхронно, например:
```javascript
function getDropdownItems() {
// Пример статического массива
return [
{ value: 'value1', text: 'Display Text 1' },
{ value: 'value2', text: 'Display Text 2' }
// и так далее...
];
// Пример использования асинхронных данных (AJAX запрос и т.д.)
}
```
Не забудьте добавить ваш плагин в конфигурацию CKEditor:
```javascript
CKEDITOR.replace('editor', {
extraPlugins: 'customRichCombo'
});
```
Таким образом, каждый раз, когда пользователь будет открывать выпадающий список `customCombo`, он будет заполнен самыми актуальными данными благодаря функции `onOpen`.