Create custom button(s) for CKeditor 5 toolbar

ǝsʞǝꓕ ɐuɹɐꓭ picture ǝsʞǝꓕ ɐuɹɐꓭ · Sep 21, 2018 · Viewed 8.6k times · Source

I've managed to customize the header and highlight dropdowns for CKEditor 5 – classic editor build by creating a new custom build.
But I don't know how to add additional buttons to the toolbar. For example a fullscreen button. Current progress: github link

Answer

Maciej Bukowski picture Maciej Bukowski · Sep 21, 2018

If you want to add existing buttons to the main toolbar, then you need to configure the config.toolbar. In your example it corresponds to these lines.

There's no fullscreen button at this moment. You can add +1 to the https://github.com/ckeditor/ckeditor5/issues/1235 to increase its priority or try to implement this feature on your own.

Basically, to create your own button you need to create a plugin which registers the button in the component factory and adds some actions that will be performed on the buttonView:execute event. You can follow the steps described in creating a simple plugin guide. A good and complementary reading about the UI library can be found here.