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.
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.
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.
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.
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
Copyright © 2018 Genii Software Ltd.
Tags: CKEditor