如何自定义CKEditor 5的样式（如修改背景色等相关样式属性）

• 提高自定义样式的优先级
  不要直接用编辑器的类名写样式，叠加更高优先级的选择器，比如你页面里包裹CKEditor的父容器ID，常规场景优先靠选择器优先级覆盖，极端场景再用!important，示例写法：

/* 假设编辑器外层父容器ID为editor-wrap */
#editor-wrap .ck-editor__editable {
  background-color: #f5f5f5;
}
/* 优先级足够的情况下不需要加!important，实在覆盖不了再用 */
.ck-editor__editable {
  background-color: #f5f5f5 !important;
}

• 确认你修改的是正确的DOM节点
  CKEditor有三层常用节点，修改前先确认你的需求对应的节点：

/* 整个编辑器外层容器背景 */
.ck.ck-editor {
  background-color: #fff;
}
/* 顶部工具栏容器背景 */
.ck.ck-editor__top .ck-toolbar {
  background-color: #e8e8e8;
}
/* 编辑内容区未聚焦时的背景 */
.ck.ck-editor__editable:not(.ck-focused) {
  background-color: #f0f0f0;
}
/* 编辑内容区聚焦时的背景 */
.ck.ck-editor__editable.ck-focused {
  background-color: #ffffff;
}

• 检查样式的引入顺序
  确保你的自定义CSS是在CKEditor的官方样式文件之后引入的，相同优先级的选择器，后引入的样式会覆盖先引入的。如果你是在Vue/React等框架中使用，不要把自定义样式写到带scoped属性的组件样式里，scoped样式的作用域限制会导致无法覆盖全局的CKEditor默认样式，要写到全局CSS文件中。
• 如果需要修改编辑器内部输出内容的背景
  需要在初始化编辑器时传入内容样式配置：

ClassicEditor
  .create( document.querySelector( '#editor' ), {
    // 其他原有配置
    contentStyles: {
      definitions: [
        {
          name: 'body',
          styles: {
            'background-color': '#f5f5f5'
          }
        }
      ]
    }
  } )
  .catch( error => {
    console.error( error );
  } );

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