CODEWITHSUNDEEP
pluginsdynamicdialogckeditor
rudolfv
rudolfv

Reputation: 817

CKEditor 3.x - Dynamically add UI elements to plugin dialog

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.

alt text

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.

Upvotes: 4

Views: 4009

Answers (3)

rudolfv
rudolfv

Reputation: 817

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

Upvotes: 1

Denis
Denis

Reputation: 4968

You can add an iFrame with an external page that you can customize using a set of usual and easier tools like jQuery (javascript) and your server-side programming language. In some cases you would like to make sure that the iFrame's content will not be cached by appending some random text in the query string. Then iframe page can communicate with the dialog by calling parent.*

Upvotes: 3

Threl
Threl

Reputation: 191

Currently I'm working with CKEditor, too. Though our problem is not exactly alike, my approach is to use a component in the plugin dialog that contains a div. Then, in onShow, I will load a certain page to the div.

I find it easier since I can manipulate that certain page more freely (like dynamically add UI element).

But there is a problem with this approach. CKEditor never deletes its dialog divs. So if after browsing other pages and then going back to the editor page, a click on the plugin button will duplicate dialog div (which contain the page in which I do my manipulation).

I'm still looking for the solution or perhaps another way to do this. I'll try to update my answer if I've got something.

Upvotes: 1

Related Questions