Revision as of 13:43, 11 January 2011

CKEditor offers native jQuery integration through its jQuery Adapter (a jQuery plugin basically). It provides deep integration of CKEditor into jQuery, using its native features.

Creating Editor Instances

In order to create editor instances, load the usual CKEditor core script file as well as the jQuery Adapter file, in the following order:

<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="/ckeditor/adapters/jquery.js"></script>

At this point any textarea, p, or div element can be transformed into a rich text editor by using the ckeditor() method.

$( 'textarea.editor' ).ckeditor();

Note that you can also make use of the jQuery chaining.

$( '.section-x' )
    .find( 'textarea.editor' )
        .ckeditor()
    .end()
    .find( 'a' )
        .addClass( 'mylink' )
    .end();

The ckeditor() method is the main method of the jQuery adapter. It accepts two optional parameters:

• A callback function to be executed when the editor is ready.
• Configuration options specific to the created editor instance.

The configurations options are passed through a simple object that contain properties, each one related to a specific editor setting.

$('.jquery_ckeditor')
    .ckeditor( function() { /* callback code */ }, { skin : 'office2003' } );
    .ckeditor( callback2 );

The code presented above will not create two editors. On discovering that one editor is already being created, it will wait with the second callback. Each of the callback functions will be executed in the context of the CKEDITOR.editor object (so this will be the editor) and the DOM element object will be passed as parameter.

Code interaction with editor instances

As soon as an editor instance is ready (after the above callback call), the ckeditorGet() method can then be used to retrieve a CKEDITOR.editor object that represents an editor instance. For example:

var editor = $('.jquery_ckeditor').ckeditorGet();
alert( editor.checkDirty() );

Because setting and retrieving the editor data is a common operation, the jQuery Adapter also provides the dedicated val() method:

// Get the editor data.
var data = $( 'textarea.editor' ).val();
// Set the editor data.
$( 'textarea.editor' ).val( 'my new content' );

This feature can be disabled by setting CKEDITOR.config.jqueryOverrideVal to false, before loading the adapter code.

For textareas, the editor will automatically return it's content back to the form when it is submitted. CKEditor also works with the official jQuery Form Plugin for AJAX based forms. It doesn't require anything from the developer side.

Events handling

Although CKEditor uses its own event system, there are four main events which we're exposing to the jQuery event system. All events use the event namespace, which is simply named ".ckeditor".

The following events are available:

• instanceReady.ckeditor: fired when the editor is created, but before any callback being passed to the ckeditor() method.
• setData.ckeditor: fired when data is set into the editor.
• getData.ckeditor: fired when data is fetched from the editor. The current editor data is also passed in the arguments.
• destroy.ckeditor: fired when the editor gets destroyed. It can be used, for example, to execute some cleanup on the page.

The editor instance is always passed as the first data argument for the listener. Both getData and setData are often used internally so listening to them should be done with care.

jQuery events DO bubble up through the DOM, so they can be listened selectively on certain parts of the document.