John's Blog | XPages/Domino 8.5 - Extending the Dojo Rich Text Editor Toolbar

Monday 6th, April 2009

XPages/Domino 8.5 - Extending the Dojo Rich Text Editor Toolbar04/06/2009 07:04 AM

Domino 8.5

A number of folks, including myself, have been looking to extend the XPages/Domino 8.5 Dojo Rich Text Editor toolbar. The Dojo Editor toolbar usually has other features available such as the create link or insert image. The issue in adding the additional plugins is that Domino 8.5 has it's own flavor of the Dojo Editor.

Steve Leland has just published a Wiki article describing how to extend the "ibm.domino.widget.layout.DominoRichText class" to add in some additional features to the toolbar.

He points out that the plugins for the following are shipped with Designer and Domino Server but are not implemented:

formatBlock - assigns css defined formats
createLink - constructs an anchor tag with a user supplied URL
insertImage - constructs an image tag with a user supplied URL

In this article Steve show's how to extend the Editor for both XPages and the Domino classic web server.

Here's a snippet from the article describing how to extend the toolbar for XPages:

XPages
Let's create a JavaScript class in data\domino\js\dojo-1.1.1\test\widget\layout\TestRichText.js to encapsulate the LinkDialog dependency - using the dojo.require() statement.   Here's the file contents:
/* ******************************************************************/
/*                                                                                                                      */
/* Sample Rich Text Toolbar extension                                */
/*        &a mp;am p;nbs p;                                             */
/* ******************************************************************/
dojo.provide("test.widget.layout.TestRichText");

dojo.require("ibm.domino.widget.layout.DominoRichText");
dojo.require("dijit._editor.plugins.LinkDialog");
dojo.declare("test.widget.layout.TestRichText", ibm.domino.widget.layout.DominoRichText, {
    constructor: function() {
        if(dojo.isArray(this.extraPlugins)) {
            this.extraPlugins.push("|", "formatBlock", "createLink","insertImage", "|");
        } else {
            this.extraPlugins = [ "formatBlock", "createLink", "insertImage","|" ];
        }
    }//,
}
);

Save that to the TestRichText.js file.

Now we need to have the XPage which uses our rich text control instruct Dojo runtime to load our class into the browser - with a dojo.requires('test.widget.layout.TestRichText') statement. This is done using our XPage's Properties tab, and selecting 'All Properties'. We are interested in the 'resources' property - clicking on the plus image lets us identify our resource as a Dojo Module, and we give it our class as a value:

Image:John's Blog - XPages/Domino 8.5 - Extending the Dojo Rich Text Editor Toolbar

Image:John's Blog - XPages/Domino 8.5 - Extending the Dojo Rich Text Editor Toolbar

Then we need to put a rich text control on our XPage, exactly as if it were an ordinary rich text control, and on its Properties tab, select 'All Properties' and set the dojoType with a value of our class:
Image:John's Blog - XPages/Domino 8.5 - Extending the Dojo Rich Text Editor Toolbar

This page has been accessed 1351 times.

Comments :

1. VIjay04/18/2009 11:30:58 PM

Nice information.

Please post the NSF to adopt early
Regards
Vijay

2. Ketil01/01/2010 02:31:46 AM

You could also just put the javascript between to script tags in your xPage or custom control. That will also do the trick. I did that in 8.5.1

Ketil