Opened 11 years ago

Closed 11 years ago

#9250 closed Bug (fixed)

Find the easiest way for users to get&set the toolbar configuration

Reported by: Wiktor Walc Owned by: Piotrek Koszuliński
Priority: Normal Milestone: CKEditor 4.0
Component: UI : Toolbar Version: 4.0
Keywords: Cc:


We made a big step forward making CKEditor more open for thirdparty plugins, plugin developers are now able to provide parts that integrate well with CKEditor.

We have now still a little problem with defininig the toolbar configuration, in case user wanted to change the default layout.


The toolbar configuration is hardcoded. The full toolbar definition is available in the API docs and on the docs site.

Plugins developers need to provide instructions on how to enable the plugin and how to inject a button into the toolbar configuration.


The toolbar configuration is generated automatically. The full toolbar definition is not available, because there is no "full" toolbar anymore. Each user is able to download a customized build of CKEditor with or without thirdparty plugins.

How to inform user what is his toolbar configuration in V4?

There are at least two approaches that we can take:

1) "Define" the toolbar in config.js

When building CKEditor, the builder could "automagically" generate the toolbar configuration and inject is as a comment in config.js.


  • relatively easy for user to start modifying his toolbar


  • buttons provided by plugins enabled with extraPlugins (e.g. downloaded separately from the addons repository) are not included in config.js. The user is in the same situation as in V3.

2) Provide the "toolbar" sample in each CKEditor build


  • the toolbar sample can easily grab all available buttons, even those registered by extra plugins, and display a nice user friendly information:
    • the currently used toolbar (in case user already set config.toolbar)
    • the "full" toolbar configuration for the reference


  • user that open config.js will have to read first the comment to open the sample page, to find out how to configure the toolbar.

The about page?

CKEditor V4 has become a WYSIWYG framework, where one build of CKEditor may differ a lot from another build. How about instead of having a toolbar sample, make the HTML page a bit more generic and, apart from displaying the available "full" toolbar, display also e.g. the list of enabled plugins?

Change History (9)

comment:1 Changed 11 years ago by Frederico Caldeira Knabben

Status: newconfirmed

I'm ok for solution "2" for now.

The "about" idea is something different and should handled separately.

comment:2 Changed 11 years ago by Piotrek Koszuliński

Owner: set to Piotrek Koszuliński
Status: confirmedassigned

comment:3 Changed 11 years ago by Piotrek Koszuliński

Status: assignedreview

I pushed t/9250.

You have to modify toolbar conf. to see its configuration in the sample.

comment:4 Changed 11 years ago by Garry Yao

Status: reviewreview_failed

In toolbar sample the current toolbar section is not shown with custom configuration coded in config.js, in at least FF (Probably due to editor#instanceReady is not fired for display:none).

comment:5 Changed 11 years ago by Garry Yao

I wonder if it would be even helpful to make this sample page a playground, allowing user to change toolbar configuration on the fly to show it instantly.

comment:6 Changed 11 years ago by Garry Yao

Component: UI : Context MenuUI : Toolbar

comment:7 Changed 11 years ago by Piotrek Koszuliński

Status: review_failedreview

instanceReady indeed isn't fired and I reported that as a bug - #9446. Please skip FF for this review.

Regarding richer playground - it's a good idea for the future, but for v4 we need something simple ASAP :). Wiktor even came up with an idea for drag&drop toolbar builder :).

comment:8 Changed 11 years ago by Garry Yao

Status: reviewreview_passed

comment:9 Changed 11 years ago by Piotrek Koszuliński

Resolution: fixed
Status: review_passedclosed
Note: See TracTickets for help on using tickets.
© 2003 – 2022, CKSource sp. z o.o. sp.k. All rights reserved. | Terms of use | Privacy policy