CKEditor On Air

15 07 2010

Although Adobe has provided a new (opensource) Text Layout Framework with the release of Flashplayer 10 and Adobe AIR 1.5, i am more curious whether it was possible to use a javascript editor like the CKEditor within for example Adobe AIR.

After some searching on the web, i found out that it should be possible to use javascript/html editors like CKEditor within Adobe AIR, but little info was available on how to do that.

So this blog post describes the steps i have made to successfully integrate the CKEditor with Adobe AIR, called CKEditorOnAir. Download CKEditorOnAir.zip for full example code.

Although the code samples should work within Adobe AIR 1.5 i am using Adobe AIR 2.0 for this example. Furthermore i have used a branche of the CKEditor due to the fact that the current release of CKEditor 3.3.x has some difficulties with the Adobe AIR security constraints. CKEditor developers are working on these issues, and there efforts so far can be found here.

Below is a screenshot of the application, which contains a textarea field for editing raw html content, a button for loading the content from the textarea to the CKEditor instance.

CKEditorOnAir screenshot

CKEditorOnAir application screenshot

I will not go into detail here about the configuration settings (toolbar, color etc.) used for the CKEditor instance, but you can find them in the “src/assets/ckeditor/config.js” file within the CKEditorOnAir.zip.

So now you know what the result will be, lets dive into the wonder world of application sandboxes, non-application sandboxes and the bridges which connects them.

Because the CKEditor sources are doing all kind of wonderfull javascript things which are prohibited by Adobe AIR it is not possible to load a html file with a CKEditor instance directly with the actionscript HTMLLoader class into the AIR runtime. If you want to know more about these Adobe AIR security constraints, i suggest to read some Adobe documents about this topic.

Two files are necessary to load a CKEditor into Adobe AIR and communicate with the CKEditor API from the AIR API and vice versa:

  1. index.html (running in the application sandbox)
  2. aireditor.html (running in the non-application sandbox)

The index.html file is loaded by the actionscript class HTMLLoader and from within this file you have access to the complete Adobe AIR API. You can also call javascript functions within this file directly from actionscript.

The aireditor.html file is loaded from the (sandboxed) index.html file using an iframe and has access to all kind of features which is needed by the CKEditor including the CKEditor API.

Two separate worlds, so how do we communicate between those worlds? Fortunately Adobe AIR creates two interfaces on every loaded html window: parentSandboxBridge and the childSandboxBridge.

This way we can expose javascript functions from the index.html to the loaded contentWindow of the iframe, but also call javascript functions which are exposed by the aireditor.html file in the same way.

aireditor.html example:
var childBridgeInterface = {};
childBridgeInterface.setContent = function(content) {
aireditor.setData(content);
}
window.childSandboxBridge = childBridgeInterface;

The above “setContent” function can now be called from index.html file by using the childSandboxBridge of the iframe contentWindow:
document.getElementById("sandbox").contentWindow.childSandboxBridge.setContent(content);

Check the complete sources of index.html and aireditor.html in the CKEditorOnAir.zip. Both files can be found in the “src/assets/ckeditor” location.

In another post i will explain howto send the content from the CKEditor instance to actionscript using a CKEditor save plugin. Have fun!


Actions

Information

2 responses

15 07 2010
Flex learner | Blog | CKEditor On Air « Gerton's Corner

[…] Continue reading here: CKEditor On Air « Gerton's Corner […]

26 09 2011
Yehia Shouman (@yehiashouman)

I THANK you😀 I were under the influence that there’s no way to do it with all the lack of documentation

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s




%d bloggers like this: