Some time ago Steve Leland added a great article to the Domino Application Development wiki for extending the rich text editor in XPages. On a similar topic, some time ago I posted an idea on IdeaJam for using the Editor2 dojo widget that ships with the Domino Blog template for XPages. For those who haven’t compared the blog template with the XPages rich text editor, the main frustration here is that the rich text editor which ships with XPages does not allow you to add links or images, as you can with the editor for the blog template. (There are other additions in the blog template like switching between html mode and wysiwyg mode, but I’ll pass over that for now).

Steve’s article demonstrates how to extend the DominoRichText class to add buttons for Format Block, Create Link and Insert Image, by creating a new javascript file that uses these plugins that actually are already shipped as part of the dojo install. I have nothing against extending dojo modules by adding new javascript files – I’ve done it myself in the past to add validation to the dijit.form.SimpleTextArea dojo module. However, the niggling dissatisfaction that has always rankled me is that creating a new javascript file requires adding it to the relevant server in some way. If you’re creating your application for a single internal server there may appear to be no real issues. But there’s always the scenario where you (or someone else) might find some years down the line that your code suddenly stops working because the application gets put on another server and no one knew about that little javascript file you created years ago.

So the holy grail that I’ve always desired has been to extend the ibm.domino.widget.layout.DominoRichText dojo module in a way that doesn’t require creating a new javascript file. In theory I was certain it should be possible, and recently I revisited it and found the solution, which was amazingly simple.

The first key is to include the dojo module that holds the link dialog and the insert image dialog. That’s just a case of adding this code into the resources area:

<

xp:dojoModule name=“dijit._editor.plugins.LinkDialog”></xp:dojoModule>

Then we need to extend the rich text editor. First we add the basic Rich Text core control and specifying the dojoType as “ibm.domino.widget.layout.DominoRichText”. If we look in the All Properties section for the rich text editor there is a section for dojoAttributes where we can add attributes (NB This is new with 8.5.1). We just need to add an attribute specifying name as “extraPlugins” and the value as an array of the properties, e.g. [“createLink”,”insertImage”,”formatBlock”,”|”] – the pipe adds a separator. So the All Properties can look like this (here I’ve just added the createLink and a separator):

dojoAttributes

Note that you can add other dojoAttributes here, such as fontName etc., as I have in the code below.

 

<xp:inputRichText id=“inputRichText1” value=“#{document1.mainBody}” dojoType=“ibm.domino.widget.layout.DominoRichText”>

<xp:this.dojoAttributes>

<xp:dojoAttribute name=“fontName” value=“Arial”>

</xp:dojoAttribute>

<xp:dojoAttribute name=“extraPlugins”>

<xp:this.value><![CDATA[[“createLink”,”|”]]]></xp:this.value>

</xp:dojoAttribute>

</xp:this.dojoAttributes>

</xp:inputRichText> 

4 thoughts on “Extending the Rich Text Editor in XPages”

  1. It worked like a charm !! Very nice indeed..

    Thanks a lot Paul for this.

    Just for the sake of completeness, I had to include the module in resource section of XPage.

    <xp:dojoModule name=”ibm.domino.widget.layout.DominoRichText”></xp:dojoModule>

    Thanks again !!

  2. Thanks a mil!!

    Just one question, to insert a image you must enter the url. Is there a way to make them browse for the images? Having trouble with that.

    Thank you

  3. Not that I’m aware of. I think for that you’d need to extend the DominoRichText class, writing your own code to create that sort of dialog.

    I can’t remember how sensitive that plugin is to validating the url entered. But I know the link plugin complains that some urls aren’t valid (for example if they start with “/”), even though they do work.

    I’m in the managed beta program for 8.5.2. I’ve noticed in 8.5.2 CD4, the CKEditor is used by default for editing Rich Text. I haven’t looked at how that works yet (maybe later this week), but I’ll let you know how that handles images. Of course, the usual disclaimer applies, that what’s currently in 8.5.2 managed beta may not necessarily make it into the gold product.

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top