如何在新行而不是主行中呈现 CKEditor5 工具栏按钮？答案

【问题标题】：How to render CKEditor5 toolbar buttons in a new row instead of the main row?如何在新行而不是主行中呈现 CKEditor5 工具栏按钮？
【发布时间】：2020-09-10 13:39:55
【问题描述】：

我从源代码将 CKEditor5 集成到我的 create react 应用程序中。现在，我想在工具栏的新行中渲染溢出的按钮，但它们显示在单独的菜单项中。

如何在新行而不是主行中显示按钮？

这是我的配置：

ClassicEditor.defaultConfig = {
  toolbar: {
    items: [
      'Essentials',
      'heading',
      'Mathtype',
      'ChemType',
      '|',
      'bold',
      'italic',
      'underline',
      ....
    ]
  }
}

【问题讨论】：

您能否提供您正在使用的工具栏项目的列表？我正在努力寻找可用工具栏项目的完整列表。也许你可以提供你的整个配置？谢谢！

标签： javascript reactjs ckeditor ckeditor5

【解决方案1】：

像这样使用toolbar 的shouldNotGroupWhenFull: true 属性：

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

【讨论】：

【解决方案2】：

使用“-”在工具栏中进行换行并在多行中呈现项目

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

【讨论】：