Provide a method for making iframe based dialogs

[Martin Kou]

There exists a large amount of legacy dialogs written for FCKeditor 2.x in the wild that are based on raw HTML sources. CKEditor v3's dialog system is based on dialog definition objects defined in JavaScript files instead of HTML source files. So it's is now impossible to reuse those HTML source files directly for CKEditor v3.

However, it is possible to bridge the two together by displaying the HTML file via an iframe inside a CKEditor v3 dialog. The HTML file would still need to be changed to account for differences in layout and dialog logic, but the changes required would be minimized.

Currently, this has to be done by declaring an html type object in the dialog definition and writing out the iframe's HTML code into the dialog definition. This works, but it is very inconvenient.

Proposed changes to the dialog system to make this easier:

// A new type of UI element definition for iframe
{
  type : 'iframe',
  src : 'http://somewhere.com/someplace.html',
  onContentLoad : functionRef
}

The contents in the iframe should be reloaded for every time the dialog is opened. And the onContentLoad function should be executed after the contents of the iframe is loaded.

After implementing the iframe UI element, one more shortcut will still be needed to directly add dialogs consisting of solely an iframe - because that's the common case for using that element.

CKEDITOR.dialog.addIframe( 'dialogName', iframeSrc, iframeOnContentLoadFunction );

[Martin Kou]

The addIframe function's argument is changed in the patch, now it looks like this:

CKEDITOR.dialog.addIframe( dialogName, dialogTitle, srcPath, width, height, onContentLoad );

[Frederico Caldeira Knabben]

Being this something that is not required by the default editor installation, I propose making it a separated plugin.

[Martin Kou]

To test it, use the following code:

CKEDITOR.dialog.addIframe(
'test',
'Testing',
'http://www.cksource.com/',
500,
400,
function(){ alert( 'iframe loaded' ); }
);

CKEDITOR.instances.editor1.openDialog( 'test' );

It can be pasted directly into Firebug console or compressed into a javascript: URL for other browsers without a JavaScript console. A dialog should appear and loads the www.cksource.com homepage. After the dialog is closed, subsequent calls to CKEDITOR.instances.editor1.openDialog( 'test' ) should open the dialog and load the page again.

[Martin Kou]

Note that the plugin is not loaded by default. If you need to test, you must modify config.js or the sample HTML files to make the editor load iframedialog plugin.

[Martin Kou]

Fixed with [3124].

Click here for more info about our SVN system.

[Senthil]

For using the addIframe function, i have added the 'iframedialog' plugin to my config.ToolBar, still i am getting an error as "addIframe is not a function". So i have reopened the ticket and setting it as high priority since it is affecting our FCKEditor 2.6 plugin upgrade.

[Frederico Caldeira Knabben]

This has been reported at #3315. We should not open this fixed ticket.

[zahni]

Is there any example how to get the event "OK button was pressed" in the iframe dialog JavaScript? Is it also possible to configure if the "OK" or "Cancel" buttons should be visible at all? Additionally, a "common" way to get the current editor object in the iframe would be nice, I am currently using the editor instance name as request parameter.