Question

I’m building a CKEditor 3.x plug-in that allows certain sections of HTML to be conditionally displayed by a separate viewer application that is tied in to our back-end systems. My CKEditor plug-in will be used to define these conditions, but I’m getting stuck on how to dynamically add UI elements to the plug-in dialog.

After I select the ‘AND’ option in the last select UI element (see the screenshot), I want to dynamically add another 3 select UI elements, similiar to the first 3 select’s.

I’ve trawled through this forum and the plug-in tutorials and I haven’t been able to figure it out. All the examples I looked at only have static dialog definitions. Any help with this would be appreciated.

Answer 1

As Denis Volovik mentioned, this can be achieved using an Iframe with an external page. This is exactly what I did a while ago to resolve my issue. Apologies for only posting it now, but here is some skeleton code of how I accomplished this:

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);
} );