Opened 4 years ago

Last modified 4 years ago

#12803 confirmed New Feature

Ideas for improving Toolbar interface

Reported by: Steve James Owned by:
Priority: Normal Milestone:
Component: UI : Toolbar Version:
Keywords: Cc:


The toolbar based interface gets out of hand quickly as new plug-ins are added. I tend to think all the icons can get very "busy" very quickly and contribute to information overload on the part of end users.

I think that some sort of overhaul of the toolbar based interface will be warranted in the future.

Some possible ideas...

(1) Implement/support icon/button pods, groups of configurable, related hidden buttons in an overlay that are displayed when a displayed toolbar button is clicked. The overlay could have a title that describes the grouping.

(2) Support some sort of configurable drop down menus as a configurable alternative to icons for the toolbar. Again, the purpose is to enable end developers to move some icons off screen while still having them accessible. I get that drop downs are supported for plug-ins, but why can't I just configure CKE to put a group of toolbar icons in a drop-down menu to take up less toolbar space?

(3) Support some sort of tabbed toolbar groupings as a configurable alternative. Thus, the top level groupings could correspond to tabs that provide high-level groupings of icons.

With all of the above approaches, the general idea is to make sure that the most used toolbar icons are readily available, while configuring less frequently used icons as somehow temporarily hidden, yet still having them be accessible.

Granted, I can fiddle around with changing toolbars, but that is kind of a show it ("it" being an icon/button) and access it, or don't show it and don't access it approach. What I am suggesting, is more of a configurable middle approach--don't show an icon/button, but still have it be available via an overlay, drop-down, or tab selection.

Change History (3)

comment:1 Changed 4 years ago by Piotrek Koszuliński

Status: newconfirmed

Thanks for this analysis. We're now designing the next big version of CKEditor and we'll definitely take your points into account. See

Of course this concerns CKEditor 4 too, but the possibilities are smaller here. I think that it's most realistic to implement grouping buttons into a single button which opens a small dropdown. It would significantly improve the situation because, for instance, the text alignment buttons could be merged into a single one, saving a lot of space in the toolbar.

Last edited 4 years ago by Piotrek Koszuliński (previous) (diff)

comment:2 Changed 4 years ago by Steve James

An additional follow-up thought I had that I thought I would contribute here is that if you do the drop-down button group approach, it would be nice if the button icon that is displayed on the toolbar at any given time for the drop-down indicates what the current/default selection is for the current WYSIWYG context. For example, using your text alignment buttons example, if I click in a section of centered text, it would be nice if the toolbar button that opens the text alignment drop down indicates centered alignment via the displayed icon. If I clicked in right-aligned text, it would be good if it indicated right aligned text. This type of visual feedback goes beyond just providing tools to the user to manipulate the text... It makes the toolbar also serve to indicate current text characteristics/status. For my users, this would be more intuitive and useful than asking them to just interpret the HTML tags shown on the bottom left of the status bar--most of my users do not understand HTML.

comment:3 Changed 4 years ago by Steve James

Another thought. Maybe also create a menu plug-in that would allow for setting the menu options similarly to the toolbar configuration. Some people may not like menus, but by providing this as a plug-in, you could give us the option if we choose to use it. In my case I would probably want to do some sort of hybrid between using the menu for the less frequently used tools, and putting the most frequently used tools on the toolbar. Some people may want a full horizontal bar menu, and some may just want a simple cascading single drop-down off a toolbar button. (A single cascading drop-down may also be better for inline editor mode.) Those kinds of things would need to be considered.

Last edited 4 years ago by Steve James (previous) (diff)
Note: See TracTickets for help on using tickets.
© 2003 – 2019 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy