XPages: Full featured CKEditor integration

So I finally cracked the CKEditor+XPages nut. It may be considered a little hacky, but it works.. :)

The following technique lets you edit RichText fields using a regular text area controls.

Add two components per RichText field. One for edit-mode (Multiline Edit Box), and one for read mode (Computed field/String/HTML). Bind both to a scoped variable, and compute visibility. In the example below, I've called the scoped variable ckEditorBody. body is the name of the RichText field being edited.

In the beforeRenderResponse-event, fetch the value from the RT-field, and put the value in the scoped variable set to the field.

if( !currentDocument.isNewNote() ){
 var doc = currentDocument.getDocument();
 var rtBody = doc.getFirstItem( 'body' );
 viewScope.put( 'ckEditorBody', rtBody.getUnformattedText() );
}

In the querySaveDocument-event for the document data source, take the scoped variable value, and put it inside a new (delete the old one) NotesRichTextItem on the domino document.

function updateBody( doc:NotesDocument, fieldName:String, value:String ){
 var rtStyle:NotesRichTextStyle = session.createRichTextStyle();
 rtStyle.setPassThruHTML( 1 );
 
 doc.removeItem( fieldName );
 var rtField:NotesRichTextItem = doc.createRichTextItem( fieldName );
 rtField.appendStyle( rtStyle );
 rtField.appendText( value ); 
}

var doc:NotesDocument = currentDocument.getDocument();
updateBody( doc, 'body', viewScope.ckEditorBody );

The reason I've created an updateBody-function is for re-usability. This code would normally lie inside a Server Side JavaScript library.

I've updated the previous CKEditor demoapp using the aforementioned technique, so that it's no longer 32k limited.

Prerequisites for running the demo

>> Download demoapp

Tested on Opera 10.50, Firefox 3.6 and IE 7/8.