Как в Ckeditor 4 динамически добавлять данные в addRichCombo?

Question

[JsCosz]

Хочу реализовать следующее, при открытии модального окна пользователь будет добавлять значения в массив dropdownItems и мне нужно чтобы после открытия addRichCombo каждый раз добавлялись новые значения из массива dropdownItems

но на данный момент значения не обноввляются, CKEDITOR v4

var dropdownItems = [];

CKEDITOR.plugins.add('dynamicfield', {
    icons: 'dynamicfield',
    init: function (editor) {
        // Функция для обновления выпадающего меню
        function updateDropdownMenu() {
            editor.ui.addRichCombo('DropdownMenu', {
                label: 'Список динамечских значений',
                title: 'Список динамечских значений',
                multiSelect: false,
                panel: {
                    css: [
                        'ul {',
                        '    padding: 0',
                        '}',
                        'a {',
                        '    text-decoration: none;',
                        '}',
                        'li {',
                        '    list-style-type: none;',
                        '    padding: 0.3rem;',
                        '    font-size: 1rem;',
                        '    border-bottom: 1px dotted black;',
                        '}',
                        '.cke_panel_list .cke_panel_listItem a {',
                        '    color: black;',
                        '}'
                    ].join('\n'),
                    voiceLabel: 'Dropdown Menu'
                },
                init: function() {
                    var dropdown = this;
                    for (var i = 0; i < dropdownItems.length; i++) {
                        dropdown.add(dropdownItems[i].slug, dropdownItems[i].name);
                    }
                },
                onClick: function(value) {
                    editor.focus();
                    editor.insertHtml(value);
                },
            });
        }


        editor.addCommand('openDialog', {
            exec: function (editor) {
                editor.openDialog('myDialog');
            }
        });

        editor.ui.addButton('myButton', {
            label: 'Добавит динамеческое значение',
            command: 'openDialog',
            toolbar: 'insert'
        });

        CKEDITOR.dialog.add('myDialog', function (editor) {
            return {
                title: 'Добавить значение',
                minWidth: 400,
                minHeight: 200,
                contents: [
                    {
                        id: 'tab1',
                        label: 'Tab 1',
                        elements: [
                            {
                                type: 'text',
                                id: 'field1',
                                label: 'Наименование '
                            },
                            {
                                type: 'text',
                                id: 'field2',
                                label: 'текст'
                            }
                        ]
                    }
                ],
                onOk: function () {
                    var dialog = this;
                    var field1Value = dialog.getValueOf('tab1', 'field1');
                    var field2Value = dialog.getValueOf('tab1', 'field2');

                    editor.insertHtml(field2Value);
                    dropdownItems.push({ slug: field2Value, name: field1Value });

                    updateDropdownMenu();
                }
            };
        });

        editor.ui.addRichCombo('DropdownMenu', {
            label: 'Список динамечских значений',
            title: 'Список динамечских значений',
            multiSelect: false,
            panel: {
                css: [
                    'ul {',
                    '    padding: 0',
                    '}',
                    'a {',
                    '    text-decoration: none;',
                    '}',
                    'li {',
                    '    list-style-type: none;',
                    '    padding: 0.3rem;',
                    '    font-size: 1rem;',
                    '    border-bottom: 1px dotted black;',
                    '}',
                    '.cke_panel_list .cke_panel_listItem a {',
                    '    color: black;',
                    '}'
                ].join('\n'),
                voiceLabel: 'Dropdown Menu'
            },
            init: function() {
                var dropdown = this;
                console.log(dropdown)
                for (var i = 0; i < dropdownItems.length; i++) {
                    dropdown.add(dropdownItems[i].slug, dropdownItems[i].name);
                }
            },
            onClick: function(value) {
                editor.focus();
                editor.insertHtml(value);
            },
        });
    }
});

Comments

[Kentavr16]

если это реакт, то для обновления компонента нужно изменение состояния приложения. Для функциональных компонентов это использование хуков useState,useReducer. Изменения простых переменных:
а) не заставит компонент перерисоваться
б) скорее всего исчезнут после ререндера. То есть массив будет пересоздаваться столько раз, сколько компонент перерисуется. Это вряд ли то что тебе нужно.

[JsCosz]

Kentavr16, это не реакт, здесь добавляю плагин для ckeditor