Tuesday, March 22, 2011

How To Customize the CKEditor in Quickr for Domino

View Comments

Last week I was asked how to customize the rich text editor that's embedded in Quickr for Domino. For those of you who don't know, the rich text editor included in Quickr for Domino is CKEditor.

So back to the task at hand. The request that I got was how to add the HTML source view to the rich text editor. The HTML source view allows someone with HTML knowledge to go in and customize the HTML or even used advanced HTML code to add more advanced content to the page.

I remember that I'd seen this tip out somewhere so I reached out to the social web. I eventually found out that the tip was shared in the Skype Quickr chat. This is a group chat of IBMers, business partners and customers who are all interested in Quickr. I believe the chat was initiated by Stuart McIntyre who also runs the Quickr Blog.

In the chat I found my answer and I figured I would share it with you in case you ever need something similar.

To add the Flash toolbar button to insert movies into the rich text editor:

Make the following change to this file:

data\domino\html\qphtml\html\common\qrdconfig.js

in Line 111 change from:

['Image', 'Table','Link','Smiley'],

to

['Image', 'Flash', 'Table','Link','Smiley'],

To add the HTML source view into the rich text editor:

in Line 119 change from:

['HorizontalRule', 'SpecialChar', 'Blockquote','Anchor']

to

['HorizontalRule', 'SpecialChar', 'Blockquote','Anchor', 'Source']

An Alternate Method

The method above has one difficulty... it must be re-applied every time you install a fixpack. Rob Novak has shared with us an alternate approach that won't get overwritten each time you install a fixpack:

-=-=-=-=-=-=-=-

Here's how to do this without being susceptible to fixpack overwrites. Quickr Domino, being based on Dojo 1.3.2 and using widgets to render itself, now has a widget registry that is extensible. You can modify a file called widgetRegistryConfig_ext.js in order to instruct Quickr to use alternate widgets. So instead of changing the qrdconfig.js one directly, you can modify this file and tell it to use your own.

The easiest way to do this is to find the widgetRegistryConfig_ext.js file which is initially empty and located in:

data\domino\html\qphtml\widgets\resources\

Then, make a copy of the above referenced qrdconfig.js in another location relative to the html directory, such as:

data\domino\html\snapps\

Make the modifications to the COPY of the file you just made as indicated in your post - not the original.

Next, we need a controller to tell it to load our copy, so we copy over the file:

data\domino\html\qphtml\widgets\page\field\ckRichText.js

Into our new directory structure:

data\domino\html\snapps\widgets\page\field\chRichText.js

How do we override it? By using Dojo's provide-require-declare methodology (long subject) in our copy of this file. Near the top, just before the renderedit: function() we add the following:


dojo.provide("snapps.widgets.page.field.ckRichText");

dojo.require("quickr.widgets.page.field._ckRichText");

dojo.declare("snapps.widgets.page.field._ckRichText", [quickr.widgets.page.field._ckRichText],

Then the rest of the code remains standard until the end where we add the following:

dojo.declare("snapps.widgets.page.field.ckRichText",
[snapps.widgets.page.field._ckRichText],
{


}
);


So now we've told Quickr to a) use our ckEditor.js file, and b) consume our qrdconfig.js file, all we have left is to tell the widget registry it all exists. So we use the widget registry to force it to load the copy whenever it encounters the instruction to load the original. Add the following code to widgetRegistryConfig_ext.js (remember it was blank before):

{
registerWidgets: [
{
type: 'REGISTERMODULEPATH',
name: "snapps",
path: "/snapps"
},
{
type: 'GLOBALREPLACE',
source: "quickr.widgets.page.field.ckRichText",
use: "snapps.widgets.page.field.ckRichText"
}
]
}

The GLOBALREPLACE type is what does all the magic.

Interestingly, a module path can be an actual path (like the \snapps one we added under html) or it can even be a Domino database to make widgets portable and replicable over clusters

-=-=-=-=-

Enjoy!

blog comments powered by Disqus