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',
      ....
    ]
  }
}

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',
      ....
    ]
  }
}

• javascript
• reactjs
• ckeditor
• ckeditor5

• Could you provide a list of the toolbar items that you are using? I am struggling to find a prehensive list of available toolbar items. Perhaps you could provide your entire config? Thanks! – fromage9747 Commented Oct 19, 2020 at 5:45

2 Answers 2

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
    }
};

Use shouldNotGroupWhenFull: true property of toolbar like this:

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