XPages: dynamically updating rich text content in a CKEditor

December 5th, 2012

For 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.

Tags: , ,

15 Responses to “XPages: dynamically updating rich text content in a CKEditor”

  1. Stephan H. Wissel Says:

    Brilliant!

  2. Per Henrik Lausten Says:

    Thanks, Stephan. I agree: it's simple but brilliant :-)

  3. Julian Buss Says:

    simple, clean and elegant - just as I like it!

  4. Fredrik Stöckel Says:

    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).

  5. Per Henrik Lausten Says:

    I appreciate your comments, Julian and Fredrik :-)

  6. Ferhat Bulut Says:

    Perfect ... That is what I need Per. Thanks :)

  7. Per Henrik Lausten Says:

    Welcome, Ferhat :-)

  8. Dilip Says:

    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 ?

  9. Per Henrik Lausten Says:

    Dilip, I see that you have asked your question on SO. Thanks.
    http://stackoverflow.com/questions/14847356/xpages-rich-text-field-formatted-in-email

  10. daniele grillo Says:

    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

  11. Per Henrik Lausten Says:

    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.

  12. swamy Says:

    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

  13. Per Henrik Lausten Says:

    Swamy, please ask your question on Stack Overflow or in the XPages forum at http://xpages.info/forum

  14. Vivek Says:

    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

  15. Per Henrik Lausten Says:

    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