Ben Langhinrichs

Photograph of Ben Langhinrichs

IBM Champion logo

E-mail address - Ben Langhinrichs






June, 2018
SMTWTFS
     01 02
03 04 05 06 07 08 09
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30

Search the weblog





























Genii Weblog


Civility in critiquing the ideas of others is no vice. Rudeness in defending your own ideas is no virtue.


Fri 8 Jun 2018, 12:42 PM
This is the third in a series of short posts on configuring CKEditor, the web editor included with Domino. It is used by default for rich text fields in XPages, and in the second post, I showed how to use it for rich text fields in Classic Domino web design. I also showed how to configure the toolbar to include only the actions you want. In this post, I'll show how you can include your own actions, termed plugins, into the toolbar in both XPages and Classic.
 
1) A simple toolbar plugin 
Toolbar actions can do a number of things. They can add content, they can manipulate existing content, and they can use content for some action outside of the rich text (like a button on a Notes form). I decided to build the classic Hello World action, represented by a globe icon. But in this case, when you say Hello, World!, it says Hello back to you. Here's how it will work:
 
Inline GIF image
 
 
2) Building the plugin 
If you look at the directories under the data directory, you will find data\domino\html\ckeditor\plugins which has all sorts of existing plugins. I started by adding a subdirectory called hello, which will be the name of my plugin.
 
Inline JPEG image
 
In that directory, I add a subdirectory names icons and create a JavaScript file called plugin.js to implement the code. Under the icons, I add a 16x16 px icon for the action as a .png file. For ease of use later, call it by the same name as the plugin name, so in this case hello.png. It looks like this:
 
Inline GIF image
 
The plugin.js code is very simple, though plugins can be much more extensive:
 
Inline GIF image
 
 
3) Adding the plugin to XPages 
We add a dojo attribute called extraPlugins with a value of "hello", and the modify the dojo attribute for toolbar to include the plugin. Here is the end result when seen in the source of the custom control:
Inline GIF image
 
When we open it up and hover over the globe icon, we see "Hello, World!" (the label from plugin.js):
 
Inline GIF image
 
and when we click on the action, it inserts the HTML we want at the insertion point:
 
Inline GIF image
 
 
4) Adding the plugin to Classic
The only code we need to change is in the doLoadCKEditor function in JS Header. We need to add that same extraPlugins value, and we need to modify toolbar. Here is the modified functionto get the toolbar seen in the animated GIF at the beginning of this post:
 
Inline GIF image
 
 
All topics in the series

Copyright © 2018 Genii Software Ltd.

Fri 8 Jun 2018, 11:50 AM
This is the third in a series of short posts on configuring CKEditor, the web editor included with Domino. It is used by default for rich text fields in XPages, and in the second post, I showed how to use it for rich text fields in Classic Domino web design. I also showed how to configure the toolbar to include only the actions you want. In this post, I'll show how you can include your own actions, termed plugins, into the toolbar in both XPages and Classic.
 
1) A simple toolbar plugin 
Toolbar actions can do a number of things. They can add content, they can manipulate existing content, and they can use content for some action outside of the rich text (like a button on a Notes form). I decided to build the classic Hello World action, represented by a globe icon. But in this case, when you say Hello, World!, it says Hello back to you. Here's how it will work:
 
Inline GIF image
 
 
2) Building the plugin 
If you look at the directories under the data directory, you will find data\domino\html\ckeditor\plugins which has all sorts of existing plugins. I started by adding a subdirectory called hello, which will be the name of my plugin.
 
Inline JPEG image
 
In that directory, I add a subdirectory names icons and create a JavaScript file called plugin.js to implement the code. Under the icons, I add a 16x16 px icon for the action as a .png file. For ease of use later, call it by the same name as the plugin name, so in this case hello.png. It looks like this:
 
Inline GIF image
 
The plugin.js code is very simple, though plugins can be much more extensive:
 
Inline GIF image
 
 
3) Adding the plugin to XPages 
We add a dojo attribute called extraPlugins with a value of "hello", and the modify the dojo attribute for toolbar to include the plugin. Here is the end result when seen in the source of the custom control:
Inline GIF image
 
When we open it up and hover over the globe icon, we see "Hello, World!" (the label from plugin.js):
 
Inline GIF image
 
and when we click on the action, it inserts the HTML we want at the insertion point:
 
Inline GIF image
 
 
4) Adding the plugin to Classic
The only code we need to change is in the doLoadCKEditor function in JS Header. We need to add that same extraPlugins value, and we need to modify toolbar. Here is the modified functionto get the toolbar seen in the animated GIF at the beginning of this post:
 
Inline GIF image
 
 
All topics in the series

Copyright © 2018 Genii Software Ltd.