Opened 11 years ago

Closed 11 years ago

Last modified 10 years ago

#3026 closed New Feature (fixed)

Provide a method for making iframe based dialogs

Reported by: Martin Kou Owned by: Martin Kou
Priority: Must have (possibly next milestone) Milestone: CKEditor 3.0
Component: UI : Dialogs Version: SVN (FCKeditor) - Retired
Keywords: Oracle Cc: senthil.kumaran@…

Description

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

Attachments (2)

3026.patch (7.9 KB) - added by Martin Kou 11 years ago.
3026_2.patch (7.6 KB) - added by Martin Kou 11 years ago.

Download all attachments as: .zip

Change History (13)

Changed 11 years ago by Martin Kou

Attachment: 3026.patch added

comment:1 Changed 11 years ago by Martin Kou

Keywords: Review? added
Type: BugNew Feature

comment:2 Changed 11 years ago by 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 );

comment:3 Changed 11 years ago by Martin Kou

Cc: senthil.kumaran@… added

comment:4 Changed 11 years ago by Frederico Caldeira Knabben

Keywords: Confirmed Review- added; Review? removed

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

comment:5 Changed 11 years ago by Martin Kou

Keywords: Review? added; Review- removed

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.

Changed 11 years ago by Martin Kou

Attachment: 3026_2.patch added

comment:6 Changed 11 years ago by 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.

comment:7 Changed 11 years ago by Frederico Caldeira Knabben

Keywords: Review+ added; Review? removed

comment:8 Changed 11 years ago by Martin Kou

Resolution: fixed
Status: newclosed

Fixed with [3124].

Click here for more info about our SVN system.

comment:9 Changed 11 years ago by Senthil

Keywords: Confirmed Review+ removed
Resolution: fixed
Status: closedreopened

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.

comment:10 Changed 11 years ago by Frederico Caldeira Knabben

Resolution: fixed
Status: reopenedclosed

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

comment:11 Changed 10 years ago by 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.

Note: See TracTickets for help on using tickets.
© 2003 – 2019 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy