Search code examples
vue.jsckeditor

CKEditor 5 - VueJS - Toolbar not wrapped when text field is smaller than width of all items combined


When the width of all the toolbar items exceeds the toolbar width it moves all the items into a submenu (3 dots on the right) instead on other versions I've seend it either wrap them to a new line (prefered) or just move a few items into the submenu.

all gone

As you see they are all gone if I press that ... menu it shows up as a big line.

wrapped in the... menu

I'm using the ckeditor5-vue library following the vue integration guide from the website for ckeditor + added a few additional items to the menu.

There is no documentation on how to manually warp or anything on the toolbar. All help appreciated.


Solution

  • Just add the option shouldNotGroupWhenFull: true for toolbar config to solve that problem:

    screenshot