Tuesday, March 2, 2010

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.

5 comments:

Fredrik Sjöström said...

Nice work, Tommy!

Tommy Valand said...

Thank you!

quintessens said...

thanks! & great work!

Hopefully IBM will also switch over to this editor for their standard NTF files (blog, wiki, discussion)

Tommy Valand said...

According to Peter Presnell, CKEditor will become the new standard RichText editor in Domino 8.5.2.

Until then.. :)

Anonymous said...

Successfully implemented in our Project.

Thanks Much Tommy !!

Rgds,
Sandeep Kantimahanthi