CKEditor On Air: Part 2

2 08 2010

In the first part of this serie i explained the steps needed to run the CKEditor in the Adobe Air runtime and how to load data from actionscript to the CKEditor instance running in Air.

This part explains how to send the data from the CKEditor instance back to the Air application, using a new CKEditor plugin called airsave. The sources for this part are available as an update to the sources of part 1.

It all starts with a new CKEditor plugin, “airsave”. For this a new directory airsave is created within the ckeditor\_source\plugins directory. In this directory a new file plugin.js is created where i copied the content from the standard save plugin with the following change to the execute function:
exec : function( editor ) {
// When executing "fire" event "airSave" containing the editor data
editor.fire( 'airSave', editor.getData() );
}

After all changes are applied, the plugin is registered to the CKEditor by adding the following line to the \ckeditor\config.js file:

config.extraPlugins = 'airsave';

In the same file the newly created AirSave button is added to the toolbar.

When the AirSave button is pressed an event called “airSave” containing the html content of the editor is fired and this event can be catched by registering an event listener with a callback function to the CKEditor instance:

var aireditor = CKEDITOR.replace( 'editor' );
// Add Listener for the "airSave" event...
aireditor.on( 'airSave', function( evt ) {
window.parentSandboxBridge.saveContent( evt.data );
} );

(see src\assets\ckeditor\aireditor.html for the complete code).

The event listener is registered in the non-sandboxed part of the Air application, so i need to call the saveContent function in the sandboxed src\assets\ckeditor\index.html file using the parentSandboxBridge.

This “sandboxed” saveContent function is calling another javascript function sendContentToAS3 which is linked to an actionscript function in the onApplicationCompleteHandler function during application start up.

Download the CKEditorOnAir_Update.zip file for full example code.


Actions

Information

2 responses

9 12 2010
Tugrul Yilmazer

hi good job for us thank you

but i have a some problem. ckeditor not resize when application resize. can we set percent width, it is possible?

28 04 2011
Petrakis Dimitris

Hi very good job

I have a problem with images. I want to find a way to browse my pc and to select an image. Do you have any idea?

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: