iframe dialog: how to get the "ok button pressed" event?

Hi, you've ran into exactly the same problem i have, so far i have the following for my plugin.js file:

(function() {
    CKEDITOR.plugins.add('youtube', {
        requires: ['iframedialog'],
        init: function(a) {
            CKEDITOR.dialog.addIframe('youtube_dialog', 'Insert YouTube Movie...', this.path + 'dialogs/youtube.html', 550, 200, function() { /*oniframeload*/ });
            a.addCommand('youtube', {
                exec: function(e) {
                    e.openDialog('youtube_dialog');
                }
            });
            a.ui.addButton('youtube', {
                label: 'Insert YouTube Movie...',
                command: 'youtube',
                icon: this.path + 'images/icon.gif'
            });
        }
    });
})();

This displays the youtube.html file successfully in the dialog window but i need to handle the click event of the OK button to insert some html into the page. I've been looking for a solution for a while but so far have found nothing. This seems surprising considering how easy it would make upgrading fckeditor plugins if there was a solution to this.

Hi cheers, i think this will have to do for now as it's held me up all day. One further question, how do you insert html in the ok event directly into the wysiwyg?

Edit: Here's how it can be done. Simply place the following in the ok event:

this._.editor.insertHtml('<p>Text Here</p>');

My final point i'd like to make is that the support on this forum is terrible. I know they all want us to pay for the support but this is a new product and there's little to no documentation so it seems like a con to me. With FCKEditor atleast they built up a community and a knowledge base first.

Hi all, sorry for the late response, you may find the following codes useful to process 'Ok' button.

var dialogDefiniton =
{
   title : 'custom buttons dialog',
   onOk : function()
   {
      //Notify your iframe scripts here...
   }
   //...
};

garry.yao wrote:Hi all, sorry for the late response, you may find the following codes useful to process 'Ok' button.

var dialogDefiniton =
{
   title : 'custom buttons dialog',
   onOk : function()
   {
      //Notify your iframe scripts here...
   }
   //...
};

Hi cheers but where do you pass this variable in. The iframedialog works slightly different from the standard dialog. Appreciate your help once more. Thanks

jgd12345 wrote:Hi cheers but where do you pass this variable in. The iframedialog works slightly different from the standard dialog. Appreciate your help once more. Thanks

Sorry for not making this clear in previous post, I'm putting a whole plugin example based on your version, I hope this could help:

/*
 * @example An iframe-based dialog with custom button handling logics.
 */
( function() {
    CKEDITOR.plugins.add( 'youtube',
    {
        requires: [ 'iframedialog' ],
        init: function( editor )
        {
           var me = this;
           CKEDITOR.dialog.add( 'youTubeDialog', function ()
           {
              return {
                 title : 'YouTube Dialog',
                 minWidth : 550,
                 minHeight : 200,
                 contents :
                       [
                          {
                             id : 'iframe',
                             label : 'Insert YouTube Movie...',
                             expand : true,
                             elements :
                                   [
                                      {
                                         type : 'iframe',
                                         src : me.path + 'dialogs/youtube.html',
                                         width : '100%',
                                         height : '100%',
                                         onContentLoad : function() {
                                            // Iframe is loaded...
                                         }
                                      }
                                   ]
                          }
                       ],
                 onOk : function()
                 {
                    // Notify your iframe scripts here...
                 }
              };
           } );

            editor.addCommand( 'youtube', new CKEDITOR.dialogCommand( 'youTubeDialog' ) );

            editor.ui.addButton( 'youtube',
            {
                label: 'Insert YouTube Movie...',
                command: 'youtube',
                icon: this.path + 'images/icon.gif'
            } );
        }
    } );
} )();

Hi cheers once more. One final question. How do i then access the iframe elements from the dialog's onOk event? I tried doing:

onOk: function() {
    editor.insertHtml('<cke:youtube url="' + window.frames[0].document.getelementById('url').value + '">YouTube Video Place Marker</cke:youtube>');
}

But this did not work. Appreciate your help again. Thanks

You can obtain the iframe reference in the callback, so I guess you got it:

onContentLoad : function() 
{
   
   var iframe = document.getElementById( this._.frameId ),
      iframeWindow = iframe.contentWindow;
}

onContentLoad: function(){
   // iframe is loaded
   var iframe = document.getElementById( this._.frameId ), 
      iframeWindow = iframe.contentWindow;
}

var iframe = document.getElementById( this._.frameId );
var iframeWindow = iframe.contentWindow;

onOk: function(){
   editor.insertHtml(iframeWindow.getElementById('test').value);
}

why is there a comma at the end of the first part and no "var" in front of "iframeWindow"?
shouldnt it be:

Code: Select all
    var iframe = document.getElementById( this._.frameId );
    var iframeWindow = iframe.contentWindow;

var iframeWindow = null;
CKEDITOR.plugins.add('myPlugin',{
    requires: ['iframedialog'],
.......

onContentLoad : function() {
var iframe = document.getElementById( this._.frameId );
iframeWindow = iframe.contentWindow;
}

onOk: function(){
   this._.editor.insertHtml(iframeWindow.getElementById('test').value);
}

Thanks Garry for all the hints! They're lifesavers.