CKEditor On Air: Part 2

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.