Extending the Rich Text Editor in XPages

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

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>