Ben Langhinrichs

Photograph of Ben Langhinrichs

E-mail address - Ben Langhinrichs

Recent posts

Thu 29 Apr 2021

Archive a Notes DB off-line w/ Field data and active content

Tue 20 Apr 2021

Archive a Notes DB off-line in 4 easy steps

Thu 18 Mar 2021

Preservation of all the tiny details

May, 2021
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 #6 - Sharing a toolbar between rich text fields

Thu 14 Jun 2018, 11:23 AM

by Ben Langhinrichs
This is the sixth in a series on configuring and customizing CKEditor. While some applications such as discussions may have a single rich text field, there are many where multiple rich text fields are available to include different steps or kinds of information. In these applications, the repeated toolbars and attachment sections may overwhelm the page. In this post, I'll show how you can disconnect the toolbar from the top (or bottom) of the rich text, and then share the same toolbar between multiple rich text fields.
1) Our goal is one toolbar which will work with multiple different rich text fields
The toolbar will understand where the cursor is, so the toolbar actions will act on that rich text.
Three rich text fields with one shared toolbar
2) Setting up the location of the toolbar and bottom status bar
There are actually three parts of the CKEditor to worry about. The first is the editor area itself, which is defined by where the rich text field appears. That's the obvious one. The other two are the toolbar and the bottom bar, which is the status line which appears at the bottom of the editor space in a standard CKEditor configuration. Both the toolbar and bottom bar can be shared. In this case, I went one further and hid the bottom bar. There may be a better way to disable it (let us know in the comments!), but this is what I came up with.
Three rich text fields with one shared toolbar
3) Adding and setting the 'sharedspaces' addin
Now that we have the divs set where we want the toolbar and bottom bar, we go ahead and add an extraplugin for 'sharedspaces'. You'll notice I also added 'autogrow' which is a useful feature that allows the rich text field editor to grow with the content. I set the minimum and maximum height for the autogrow so that it worked well with the page. Then I set the sharedspaces top and bottom values to the ids of the divs. Again, there is likely a better solution to redefining the toolbar the exact same way for each field, but this worked.
Three rich text fields with one shared toolbar
4) There is a great deal of flexibility possible, including side-by-side fields and a vertical toolbar
This example shows three rich text fields side-by-side. At first, I put the toolbar at the top as in my earlier example, but then decided it would be more useful to have a vertical toolbar. I should note that I spent way too long trying to make the toolbar go vertical with separators and such before realizing I just needed to put it in a column with only room for one icon at a time.
Three rich text fields with one shared toolbar
5) XPages, a fixed location toolbar and other thoughts
While I only showed Classic design for this demo, the process is very similar for XPages. The extraplugins get added with dojoattributes, while the shared spaces are set like a custom tooIbar with another dojo attribute. The only trick is making sure your div ids work properly in XPages, which likes to mess with such things. As for a fixed location toolbar, I didn't create an example for it, but it would be easy to put the toolbar div into a non-scrolling area of the form while the rich text fields were in a scrolling part. Do you have other ideas about how and where to use the toolbar that might not be obvious? Do you have specialized fields that are implemented other ways such as popups or floating pages? Leave a comment and let us know.
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:

1099.1. Mark Maden
(15/06/2018 07:42)

Wow, very useful I didn't realise that could be done, messy toolbars on every RTF field is one of the reasons I prefer easy clean Notes Client development, but this does help considerably.

Many thanks for the series Ben.


1099.2. Benoit Dubuc
(15/06/2018 12:12)


I'm sure you had the request already but will you have a sample to download?

Thanks :)