如何为CKEditor编辑器包裹带自定义类名的div容器？

先回顾 CKEditor4 的原有用法 #

之前在 CKEditor4 中，我们直接通过配置项就能给编辑器内容区添加自定义类：

CKEDITOR.replace('editor', {
  bodyclass: 'custom-content-class'
});

CKEditor5 的具体实现步骤 #

由于 CKEditor5 移除了bodyclass配置项，官方要求通过外层包裹容器来实现相同的样式定制需求，具体步骤如下：

1. 添加带自定义类的外层容器
   在编辑器的挂载元素外面套一个带有自定义类名的<div>，示例如下：

<div class="custom-editor-wrapper">
  <textarea id="editor"></textarea>
</div>

2. 正常初始化 CKEditor5
   按照常规流程初始化编辑器，无需额外配置，直接挂载到内层的目标元素上即可：

ClassicEditor
  .create(document.querySelector('#editor'))
  .catch(error => {
    console.error(error);
  });

3. 编写基于容器的自定义样式
   通过外层容器的类名，精准定位编辑器的各个区域并编写样式。比如修改内容区的字体、背景色，或者调整工具栏样式：

/* 定制编辑器内容区样式 */
.custom-editor-wrapper .ck-content {
  font-family: 'Arial', sans-serif;
  background-color: #f5f5f5;
  padding: 15px;
}

/* 定制编辑器工具栏样式 */
.custom-editor-wrapper .ck-toolbar {
  border-color: #ddd;
  background-color: #f8f8f8;
}

关键提示 #

这种方式通过外层容器实现样式隔离，能有效避免多个编辑器实例之间的样式冲突，且适用于 CKEditor5 的所有编辑器类型（如 InlineEditor、DecoupledEditor 等），仅需根据编辑器类型调整 CSS 选择器即可。

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