Ben Langhinrichs

Photograph of Ben Langhinrichs

E-mail address - Ben Langhinrichs







Recent posts

Sat 18 Jul 2020

Enduring favorite - Getting Data out of Notes (for whatever reason)



Thu 9 Jul 2020

Maximizing power while minimizing code and effort



Fri 29 May 2020

Round tripping, even while staying put


August, 2020
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 31

Search the weblog





























Genii Weblog

CKEditor #1 - Basic toolbar configuration

Wed 6 Jun 2018, 11:59 AM



by Ben Langhinrichs
This is the first in a series of short posts on configuring the CKEditor toolbar which is used by default in XPages for rich text fields, but which may also be added to Classic web applications with only a couple of extra steps. When searching for documentation on configuring the toolbar, almost the only posts or articles I could find show how to switch between "standard" toolbars or how to create a custom toolbar using the existing elements. I'll cover those briefly, but also show a couple more.
 
1) Switching between standard toolbars. 
There are a few standard named toolbars, 'Large', 'Medium', and 'Slim'. The easiest and most common modification in XPages is to set a dojo attribute named toolbarType to one of these three names. For example, to switch to Slim, the dojo properties would look like this:
 
Inline JPEG image
 
The different standard toolbars look like this:
 
Slim
Inline JPEG image
 
Medium
Inline JPEG image
 
Large
Inline JPEG image
 
2) Moving the location of the toolbar to the bottom 
There are times when the toolbar is in the way at the top, In this case, you can switch the toolbar to the bottom of the editor pane by setting the toolbarLocation attribute to "bottom"
 
Inline JPEG image
 
In this case, the editor would appear like this.
 
Inline JPEG image
 
 
3) Configuring your own toolbar 
In some cases, you want your own defined subset of icons. In that case, you created a dojo attribute named toolbar and give it a computed value. In the box, you create a toolbar sting and return it. Creating an ultra-minimal toolbar could look like this (showing the popup box):
 
Inline JPEG image
 
In this case, the editor would appear like this (back at the top, but could be at the bottom).
 
Inline JPEG image
 
To give you an idea of the possible tools (without adding extra plugins), this is the definition of the Large toolbar. The items are the names to look at, though you can create your own groups just like this.
 
CKEDITOR.config.toolbar_Large =
[{name: 'tools', 
   items:['Undo','Redo','MenuPaste','Find','IbmSpellChecker','ShowBlocks','IbmPermanentPen']},
{name: 'styles', 
    items:['Format','Font','FontSize','Bold','Italic','Underline','Strike','TextColor','BGColor','Subscript','Superscript','RemoveFormat']},
{name: 'paragraph', 
    items :['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','NumberedList','BulletedList','Indent','Outdent','Blockquote','BidiLtr','BidiRtl','Language' ]},
{name: 'insert', 
    items:['Table','Image','MenuLink','Anchor','Iframe','Flash','PageBreak','HorizontalRule','SpecialChar', 'Smiley']}];
 
 
4) Other toolbar attributes
If you want to play a bit with other toolbar attributes, take a look at the CKEditor 4 API toolbar config settings. Note that most can be created as named dojo attributes, but also note that IBM confused matters some by renaming the toolbar you see on that page to toolbarType. For example, if you have a large, multi-line toolbar, you can set it to be collapsed by setting toolbarStartupExpanded to true and toolbarCanCollapse also to true. The user than has a small twistie to expand the toolbar if desired.
 
I hope this has been helpful. My next post will be about using the pre-installed CKEditor in a Classic web application, with notes about how to do these same settings in that context where there are no dojo attributes.
 
All topics in the series
CKEditor - customizing and empowering the toolbar (intro)
1) CKEditor #1 - Basic toolbar configuration
2) CKEditor #2 - Use in Classic Domino web design
3) CKEditor #3 - Add your own toolbar plugin
4) CKEditor #4 - Use Domino design elements in plugin 
5) CKEditor #5 - Powering plugins with other extensions 
6) CKEditor #6 - Sharing a toolbar between rich text fields 
 

Copyright 2018 Genii Software Ltd.

What has been said:


1089.1. Ben Langhinrichs
(06/07/2018 08:12 AM)

Thanks! I hadn't seen your toolbar configuration bean, but that is quite clever.