搭配Bootstrap4使用CKEditor5时移除格式按钮消失该如何解决

修复步骤 #

原因说明 #

你使用的CKEditor5 25.0.0经典CDN构建已内置清除格式功能模块，无需额外安装插件，但该按钮默认没有加入默认工具栏展示列表，需要手动在初始化时指定配置启用。

代码修改方案 #

调整CKEditor5初始化代码，在create方法的第二个参数中传入工具栏配置，将removeFormat加入工具栏列表即可，示例如下：

<script src="https://cdn.ckeditor.com/ckeditor5/25.0.0/classic/ckeditor.js"></script>

<script>
  ClassicEditor
    .create(document.querySelector('#id'), {
      toolbar: [
        'heading', '|',
        'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote',
        'removeFormat', // 新增这行启用清除格式按钮
        'undo', 'redo'
      ]
    })
    .catch(error => {
      console.error(error);
  });
</script>

异常排查 #

如果配置完成后按钮仍未显示，可通过浏览器元素审查工具检查工具栏区域是否存在removeFormat对应按钮DOM：

• 若存在DOM但不可见，属于Bootstrap与CKEditor5样式冲突，新增如下自定义CSS强制显示即可：

.ck.ck-remove-format-button {
  display: inline-flex !important;
}

• 若不存在对应DOM，可检查CDN资源是否加载正常，或替换为更高版本的CKEditor5经典构建资源重试。

内容的提问来源于stack exchange，提问作者patrick96