CKEditor 3.x - динамически добавлять элементы пользовательского интерфейса в диалог плагина

Question

Я создаю плагин CKEditor 3.x, который позволяет условно отображать определенные разделы HTML отдельным приложением для просмотра, связанным с нашими внутренними системами.Мой плагин CKEditor будет использоваться для определения этих условий, но я застрял на том, как динамически добавлять элементы пользовательского интерфейса в диалог плагина.

После того, как я выбрал опцию «И» в последнем элементе выбора пользовательского интерфейса (см. Скриншот), я хочу динамически добавить еще 3 выбранных элемента интерфейса, аналогично первому3 select's.

Я пробирался через этот форум и учебные пособия по плагину, и я не смог понять это.Все примеры, на которые я смотрел, имеют только статические определения диалогов.Любая помощь с этим будет оценена.

Answer 1

Вы можете добавить iFrame с внешней страницей, которую можно настроить, используя набор обычных и более простых инструментов, таких как jQuery (javascript) и ваш язык программирования на стороне сервера.В некоторых случаях вы хотели бы убедиться, что содержимое iFrame не будет кэшировано, добавив некоторый случайный текст в строку запроса.Затем страница iframe может связываться с диалогом, вызывая parent. *

Answer 2

Как отметил Денис Воловик, этого можно достичь с помощью Iframe с внешней страницей.Это именно то, что я сделал некоторое время назад, чтобы решить мою проблему.Извиняюсь за то, что только опубликовал это сейчас, но вот некоторый скелетный код того, как я достиг этого:

function iframeDialog(editor) {
    return {
         title : 'someTitle',
         minWidth : 820,
         minHeight : 100,
         maxHeight: 200,
         contents :
               [
                  {
                     id : 'someTab',
                     label : '',
                     expand : true,
                     elements :
                           [
                              {
                                 id : 'myIframe',
                                 type : 'iframe',
                                 src : 'my_dialog_contents.html',
                                 width : '100%',
                                 height : 200,
                                 onContentLoad : function() {
                                        //...

                                    var iframe = document.getElementById(this._.frameId);
                                    iframeWindow = iframe.contentWindow;
                                    // can now call methods in the iframe window
                                 }
                              }
                           ]
                  }
               ],
         onShow : function() {
            // check if should display dialog, do dialog.hide if not
         },    
         onOk : function()
         {          
            var myIframe = this.getContentElement('someTab', 'myIframe');
            var iframeWindow = document.getElementById(myIframe.domId).contentWindow;
            var iframeDocument = iframeWindow.document;         

                        // can now interrogate values in the iframe, call javascript methods

                        // can also call editor methods, e.g. editor.focus(), editor.getSelection(),
        }        
    };
}

CKEDITOR.dialog.add( 'mydialog', function( editor )
{
    return iframeDialog(iframeDialog);
} );

Answer 3

В настоящее время я тоже работаю с CKEditor. Хотя наша проблема не совсем похожа, мой подход заключается в использовании компонента в диалоге плагина, который содержит div. Затем в onShow я загружу определенную страницу в div.

Мне проще, так как я могу более свободно манипулировать этой страницей (например, динамически добавлять элемент пользовательского интерфейса).

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

Я все еще ищу решение или, возможно, другой способ сделать это. Я постараюсь обновить свой ответ, если у меня что-то есть.