CKEditor

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

Hi

trying to use this piece of code but no luck

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

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

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

then i have

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

but this is triggering a "iframeWindow is not defined" error. (also when i modify the first code to what i thought it should be)

any help much apreciated!
thank you

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;

No. To access the variable iframewindow in the onOk function, it should be declared outside the scope of the onContentLoad function.
So something like

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

and then

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

now you can do something like

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

Notice I replaced 'editor' to 'this._.editor'. In my case with 'editor' it was refering to the last created ckeditor instead of the active one :s.

I'm not sure this is the right way to do it but since it took me ages to find out, I think it is worth sharing

Sander

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