How to render CKEditor5 toolbar buttons in a new row instead of the main row?

user_8443899 0
Viewed 1075

CKEditor 5

I integrated CKEditor5 in my create react app from the source. Now, I want to render the overflowed buttons in a new row of the toolbar but they are displayed in a separate menu item.

How can I display buttons in a new row instead of the main row?

Here's my config:

ClassicEditor.defaultConfig = {
  toolbar: {
    items: [
      'Essentials',
      'heading',
      'Mathtype',
      'ChemType',
      '|',
      'bold',
      'italic',
      'underline',
      ....
    ]
  }
}
ckeditor5 reactjs ckeditor javascript
2 Answers

Use shouldNotGroupWhenFull: true property of toolbar like this:

toolbar: {
    items: [ ... ],
    shouldNotGroupWhenFull: true
}
user_76702620

Use '-' to make a line break and render items in multiple lines in toolbar

const config = {
    toolbar: {
        items: [ 'bold', 'italic', '|', 'undo', 'redo', '-', 'numberedList', 'bulletedList' ],
        viewportTopOffset: 30,
        shouldNotGroupWhenFull: true
    }
};
user_56097680
Related