Small bugfix in the CKEditor integration for XPages demoapp

When you tried to upload more than one file at once (e.g. one attachment and an image), only the first file uploaded successfully.

This bug has now been fixed.

The Domino part of the demo requires Dojo 1.4.1 (Domino 8.5.2 server), as it's hard coded in the HTML header. Modify it to suit your environment.

>> Download demoapp

CKEditor: Using external plugins from an NSF

This is a follow-up to my previous blogpost regarding importing files to an NSF.

If you want to use CKEditor plugins from an NSF, you have to create an override-function for CKEditor.getUrl. The reason for this is that CKEditor automatically adds a timestamp-parameter to the url, which Domino doesn't like.

CKEDITOR_GETURL = function( resource ){
 // From NSF - don't alter the url
 if( resource.indexOf( '.nsf' ) > -1 ){
  return resource;
 } else { // Let CKEditor handle the url
  return null;
 }
}

This function has to be loaded before ckeditor.js.

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.

CKEditor integration with XPages (32k limited)

I've found a way around the 32k-limit. Read more here.

I've been asked several times to make an XPages integration with XPages. I finally buckled under the pressure last friday.

Initially I planned on making a full integration (no limits, bound to a NotesRichtextItem). Unfortunately, this is impossible using regular XPages components. I've tried a lot of hacks (rendererType, converting the field in different events, and a lot of other stuff I know nothing about), but so far I've been unable to make the integration work with the native XPages Rich Text editor control.

The last person that requested the integration was "fine" with a 32k limit on the demo, so I've extended the CKEditor Integration demo with a demo of XPages integration (bound to a regular text field).

Read the blog entry on CKEditor integration for prerequisites (CKEditor installed in a certain directory on the server).

>> Demoapp of CKEditor integration with Domino form and XPages

Finally! CKEditor integration with Lotus Domino

It's been over a year since I posted my demoapp of FCKEditor-integration with Lotus Domino.

The CKEditor (the new and improved!!! version of FCKEditor) has been out for a little while now. At first, the upload integration wasn't documented, so I didn't want to waste time reverse engineering the functionality.

I got a mail a couple of days ago from a reader about CKEditor-integration with Domino. I replied that I would create a demoapp of the integration as soon as the upload functionality was documented. Now it is (more or less).

The new API for FCKEditor is BIG, but that doesn't show on the CKEditor. Its fast as *insert something extremely fast*. Test out their demo if you don't believe me!

The only thing that's changed since the FCKEditor demoapp is the $$Return on the (f)ckupload form, and the hooks I use to rewrite the name of the upload field.

I tested the demoapp in IE8, Firefox 3.5, and Opera 10. Let me know if it doesn't work for you.

CKEditor must be installed in the ..data\domino\html\js folder (you have to create the js folder if you don't have one already). Test http://yourdomain.com/js/ckeditor/ckeditor.js to see if CKEditor is in the correct folder.

This also works on localhost, if you want to experiment on your own computer.

Read the FCKEditor-integration with Lotus Domino post as well. I may have forgot to mention some details.

Anyways, it's time to go to bed. Another day, another dime tomorrow.

>> Demoapp of integration with CKEditor