XPages: dynamically updating rich text content in a CKEditor
December 5th, 2012For the Sherlock Web solution I had a need to be able to update rich text content in a CKEditor with rich text content from backend document templates. These backend document templates can be created and edited with the Lotus Notes client and will in some cases contain rich text content of type Rich Text (and not MIME). I can not change these backend document templates to be stored as MIME, so in order to be able to update the rich text content in a CKEditor, I thought I had to wrestle with conversion of Rich Text to MIME.
I spent a lot of time getting Rich Text to MIME conversion to work in order to add the backend document templates to the rich text content in the CKEditor. I ended up with a clumsy solution that involved saving the XPages backend document in order for the updated content to appear. I had a lot of inspiration from the answers to this Stack Overflow question on appending and prepending text to a rich text field. It worked, but...
A couple of good XPages guys suggested I took a look at using the datasource getValue() and setValue() methods instead. This turned out to be right way to go.
Part of trick is that I use the wrapDocument() function from XSnippet to get a NotesXspDocument representation of the backend document template. I can then just use getValue("body") on that NotesXspDocument followed by getHTML() to get a HTML representation of the content. Brilliant!
The setValue method on the inputRichText control expects MIME and not text, so I use an XPages supplied method that converts from HTML to MIME. This is necessary in order to save the document at all.
So here is the important part of my code that reads content from the target field and updates it with a backend document field contaning Notes Rich Text, and ends up saving it as MIME:
if (templateDoc != null) {
// Insert contents into existing field
if (templateDoc.hasItem("body")) {
var orgValue = document.getValue(bodyFieldName);
var origValue;
if (orgValue != null) {
// The target field already has content
origValue = ((typeof orgValue == "string")? orgValue : orgValue.getHTML()) + "";
} else {
// The target field is empty
origValue = "";
}
var templateField = wrapDocument(templateDoc).getValue("body");
importPackage(com.ibm.xsp.http);
document.setValue(bodyFieldName, com.ibm.xsp.http.MimeMultipart.fromHTML(origValue + templateField.getHTML()));
}
}
I also used an answer from Sven Hasselbach on partially refreshing contents in a CKEditor to put my inputRichText control inside a div control in order to partially refresh the div control when the above logic runs.
Using this method I am completely rid of the need to save the backend document. This just works! 🙂
--
I have added the part about updating the inputRichText control with MIME to the OpenNTF XSnippets catalog.
--
Notice: this code snippet does not work with embedded images and attachments.
Update October 2013: Here's my solution for adding embedded images.
Tags: Lotus Domino, Lotus Domino Designer, XPages
I am an independent web developer at 
December 5th, 2012 at 14:18
Brilliant!
December 5th, 2012 at 19:46
Thanks, Stephan. I agree: it's simple but brilliant 🙂
December 5th, 2012 at 22:28
simple, clean and elegant - just as I like it!
December 6th, 2012 at 00:15
Nice solution to a common problem, Thanks! (I have the same template approach in a few older solutions but no xpages version - this will come handy).
December 6th, 2012 at 10:20
I appreciate your comments, Julian and Fredrik 🙂
January 10th, 2013 at 23:16
Perfect ... That is what I need Per. Thanks 🙂
January 11th, 2013 at 10:14
Welcome, Ferhat 🙂
February 13th, 2013 at 07:33
Hai All,
My question is completely different. I have an Xpage where a button fires an email dialog. I have a rich text control. Now when I enter some text in the rich text control and format the font color to "Red" . When I send the email, I noted in the receiving end that the font color is not "Red". It is black in color. The code behind the send button creates a temporary "memo" backend Notes document and gets all the information from the front end. The Rich text control content is retrieved as MIME and then converted into RT. I actually save the backend notes document after it is converted to RT. This is why the end user does not get the message in desired color. But I have to save the backend document to attach(embed) files into the rich text. Can some one please say why this happens ? and any solution or ideas for this ?
February 13th, 2013 at 08:23
Dilip, I see that you have asked your question on SO. Thanks.
http://stackoverflow.com/questions/14847356/xpages-rich-text-field-formatted-in-email
April 19th, 2013 at 15:28
this is a very useful tips for insert into ckeditor..and seem that if I insert the code into beforePageLoad...is not mandatory to save datasouces!
Have you any suggest for attachments....for example if your Templates is a mail that you need to response with attachament?
Tnx you
April 19th, 2013 at 20:45
Hi Daniele, unfortunately I don't have a solution to handling images and attachments. I need it too but have not yet found out how to do it.
I have asked a question on Stack Overflow about it.
May 16th, 2013 at 06:53
Hi guys, i have a problem.
i have created a richtext body, in sending mails. im getting link to view document.
but i want it as href link.
that is link should be hidden behind a lebel, like click here.
if we click on that that document has to open.
Thnq
May 16th, 2013 at 22:11
Swamy, please ask your question on Stack Overflow or in the XPages forum at http://xpages.info/forum
November 28th, 2013 at 07:58
I would like to extract all the fileds, in the document and All rich text fields to HTML using JAVA in domino designer instead of Lotus script .
Kindly help. Thank you
November 28th, 2013 at 11:32
Hi Vivek, please see how far you can go by yourself and if you get stuck, then ask your question on Stack Overflow or in the XPages forum at http://xpages.info/forum