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:
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:
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:
Here is the link to the full article: http://www-10.lotus.com/ldd/ddwiki.nsf/dx/04022009010354PMWEBMZZ.htm
Nice work Steve!
-John
Technorati: Domino 8.5 XPages
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:
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:
Here is the link to the full article: http://www-10.lotus.com/ldd/ddwiki.nsf/dx/04022009010354PMWEBMZZ.htm
Nice work Steve!
-John
Technorati: Domino 8.5 XPages
This page has been accessed 2416 times.
?OpenAgent&C89E7FC716C5F51085257590004D4F9C)
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 
3. reynald07/10/2010 04:20:49 AM
Homepage: http://localhost/johnblog.nsf
how can i include in the rich text the copy and paste coming from the word document including the image? Thanks
