首页 > 建站教程 > 编辑器、IDE >  ckeditor5工具栏宽度不够自动换行,不要折叠正文

ckeditor5工具栏宽度不够自动换行,不要折叠

ckeditor5在编辑器宽度不够时,默认会折叠工具栏,效果如下:

ckeditor5


可是,客户的要求是,换行,不要折叠工具栏:

ckeditor5


其实非常简单,原先的工具栏配置如下:

toolbar: [
  'heading', 'fontFamily', 'fontSize', '|',
  'bold', 'italic', 'underline', 'strikethrough', 'fontBackgroundColor', 'fontColor', 'superscript', 'subscript', 'horizontalLine', 'specialCharacters', 'blockQuote', '|',
  'bulletedList', 'numberedList', '|',
  'outdent', 'indent', 'alignment', 'pageBreak', 'selectAll', '|',
  'link', 'imageInsert', 'mediaEmbed', 'insertTable', '|',
  'findAndReplace', 'sourceEditing', 'undo', 'redo', 'removeFormat', 'code', 'codeBlock', 'markDown'
],


给它加个shouldNotGroupWhenFull属性,并将toolbar由数组改成对象,即可:

toolbar: {
  shouldNotGroupWhenFull: true,
  items: [
    'heading', 'fontFamily', 'fontSize', '|',
    'bold', 'italic', 'underline', 'strikethrough', 'fontBackgroundColor', 'fontColor', 'superscript', 'subscript', 'horizontalLine', 'specialCharacters', 'blockQuote', '|',
    'bulletedList', 'numberedList', '|',
    'outdent', 'indent', 'alignment', 'pageBreak', 'selectAll', '|',
    'link', 'imageInsert', 'mediaEmbed', 'insertTable', '|',
    'findAndReplace', 'sourceEditing', 'undo', 'redo', 'removeFormat', 'code', 'codeBlock', 'markDown'
  ]
},