Tuesday, September 15, 2009

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


quintiexxx said...

good good good!

I understood CK Editor is going to be included in Quickr 8.x

Tommy Valand said...

Although I don't use Quickr, this would be great news, as it would mean more money to the project -> better product.

Rob:-] said...

Which version did you use? I see version 3.0 and 2.6.5, both released one day apart.

Tommy Valand said...

@Rob: This blogpost is about CKEditor.

I've linked to my previous FCKEditor-integration at the top of the post.

FCKEditor is all < 3 releases.

CKEditor, which is rewritten from the ground up, is version 3 and above.

Unknown said...

Fantastic article and many thanks for the demo db as well....it all works first time.

Tommy Valand said...

@Andrew: I wouldn't call it an article (I'm a blogger with a few tricks up my sleeve), but you're welcome.. :)

Andrew said...

Hi Tommy,

Having tested it a little more extensively, I'm having problems editing an existing doc and uploading another file or picture to it (using IE8). I get the following JS error details on pressing the "Send it to Server" button:

Message: '_.filebrowserSe' is null or not an object
Line: 47
Char: 2232
Code: 0
URI: http://localhost/js/ckeditor/ckeditor.js

Does anyone else have the same issue or is it something local to me?

Tommy Valand said...

Judging by the error message, it looks like you have the file browser enabled?

Try to disable it, and see if you still get the error.

Cedric said...

Hi Tommy,

You've done a very good staff, really,
I download your implementation for CKEditor, it works fine with XPage but i get an error with the form implementation when I try to upload a file or an image : http Error 500
"Exception de chargement de fichiers (File Upload) non autorisée "
Do you know what should I do to solve it ?
Thank you in advance for your help,

Tommy Valand said...

Most likely it's the upload-form that's changed.

Open the ckupload form on the web, view source, and see what the name of the upload field (input type=file) is.

In the demoapp it's "%%File.c125746700522db9.5c6ed0a0107a57a8c125746700522f3e.$Body.0.70"

In the ckeditor_loader script library, near the bottom, look for this line:
//Unique identifier snapped from HTML-source of the ckupload-form
var fieldName = '%%File.' + replicaId + '.5c6ed0a0107a57a8c125746700522f3e.$Body.0.70';

If the name of the upload control has changed, replace the existing one with the new. If the database you're working on is a template, compute the replicaid in the fieldname as I did in the JS-header of the demo-form.

I believe the replicaid has to be the same as the db you're uploading to.

Cedric said...


Thank you very much, the name of the upload control has actually changed.
After having replace the existing one with the new it works fine.

I would like to have your advice about these questions :
- Do you think CKEditor can be a better option than the native editor?

- I would like to "upgrade" my databases from notes client to xpage. These databases we only be used in web mode after that.
Is there a way not to loose the content in documents when users will for the first time edit and save documents in web mode?
Sorry for my english.

Tommy Valand said...

If you decide to use CKEditor over the native editor, the content will be XPages/web only (shows as html in a regular Notes app), as it's stored as HTML. That's the only downside I can see with the CKEditor solution.

There are rumors about CKEditor being the native RichText editor in Domino 8.5.2, so if you're not in a hurry, you'd may want you use the native editor until this is officially confirmed.

If you decide on this CKEditor solution, you have to convert the RichText fields to HTML.

You can get the html from your existing RichTextFields like this

Cedric said...

Hi Tommy,

Thank you again for your helpful answers.
It would be a good news if IBM could uses CK Editor, we can expect they will solve some of theses two lasts problems:
- When a user remove a link the attachment (contained in a Lotus document) stays in the database, same for pictures.

- There is no section available, I think I will try to add it myself in CK Editor, but I also think that if it is not yet possible natively, it might be because it is no that easy.

Tommy Valand said...

Regarding links, you could have an scheduled agent that FTSearches the content documents for the UNIDs of the "attachment" documents.

In the applications I work with, I let the attachments stay as they are in case someone has linked to them from outside the application. Storage isn't that expensive these days.

Regarding sections, you'd have to dig into the CKEditor API. It probably wouldn't be that hard to insert them, but making them easy to edit would probably take a lot of time.

Cedric said...

Hi Tommy,

Do you think it is possible to upload files and pictures in the current document instead of storing it in another document? Could you give me a clue to do that?
Thank you very much

Tommy Valand said...

I haven't done it myself, but you would basically need to have a JS variable that says when the current document is new (store in a temporary doc)/when you're working on an existing document (store in same). Also a WebQuerySave agent that fetches the image from the tempdoc when a new document is saved.

Read my previous blogposts on FCKEditor/CKEditor on how the integration between Domino and the editor works.

Anonymous said...

Hi Tommy,
you've done a great job.
My name is Siamak and would like to use your demo app(CkEditor integration with domino)in my Domino app, however, when I use the link option to upload file attachment (i,e MS.Word), would like to have the icon for MS.Word showing up beside its name when inserting it into the Editor. Could you help me with that please.
I'd really appreciate your help.

Tommy Valand said...

Sorry Siamak.. I don't know enough about the CKEditor API to be much help.

That's a question more suited for the CKEditor forums.

Mediokor said...

Hi Tommy,

Very helpful article.

I am not able to test it successfully on my local system using Domino form. It gives the message "Dojo is not available. CKEditor will not load".

Can you please let me know what I am missing.

Tommy Valand said...

What version of Notes/Domino are you running? I think the demoapp was written for N/D 8.5. Maybe 8.5.1.

Anonymous said...

Hi Tommy, I really appreciate what you have done. I need a help

I tried but i got an error when clicked "send it to server" button in upload tab. The error message are "HTTP Web Server: Invalid URL Exception ".

Thanks Before

Tommy Valand said...

If you read the comments in this post, and the post about FCKEditor integration, there are other people that had similar issues.

Have you tested the suggestions I gave to there?

Vijay O said...

Hi Tommy,

I am using your idea of integrating the CKEditor with Domino. Instead of saving in the separate documents, in the query save, I am reattaching the file with the same rich text field. Everything works perfectly until this. when I add another CKEditor field on the same page, I get the below error when clicking the "Send it to server". I can see the file attached and the document created in the backend. "SCRIPT5007: Unable to get property 'getDialog' of an undefined or null reference. File: ckeditor.js, Line: 873, Column: 79".

I can see the mentioned issue happens in your demo database also. If you fix the issue in your demo databases, that would be great help. If you find some time. Please help. Thanks a lot.