我之前也踩过CKEditor强制修改默认样式的坑，针对你遇到的文字颜色与背景色一致、文本被强制居中的问题，给你几个实用的解决办法：

1. 初始化时直接指定内容区域样式 #

这是最直接的方式，在创建CKEditor实例时，通过contentStyle配置覆盖默认样式，确保和原textarea保持一致：

ClassicEditor
  .create(document.querySelector('#你的textareaID'), {
    contentStyle: `
      body {
        color: #你的原文字颜色;
        background-color: #你的原背景色;
        text-align: left !important;
      }
    `
  })
  .catch(error => {
    console.error(error);
  });

这里的样式会直接作用于CKEditor的编辑内容区域，完全替代它的默认样式。

2. 针对编辑区域写高优先级CSS #

如果习惯用外部CSS管理样式，可以针对CKEditor的编辑区域类名写样式，注意不同版本类名不同：

• CKEditor 5 用.ck-editor__editable_inline
• CKEditor 4 用.cke_editable

示例CSS：

/* CKEditor 5 示例 */
.ck-editor__editable_inline {
  color: #333 !important; /* 替换为你原textarea的文字颜色 */
  background-color: #fff !important; /* 替换为原背景色 */
  text-align: left !important;
}

用!important是为了确保样式优先级高于CKEditor的默认样式，如果你能写出更具体的选择器，也可以不用!important。

3. 禁用自动样式重置或插件干扰 #

有些时候CKEditor的自动段落功能（autoParagraph）或者对齐插件会默认修改样式，你可以关闭这些默认行为：

ClassicEditor
  .create(document.querySelector('#你的textareaID'), {
    autoParagraph: false, // 禁止自动给内容加<p>标签，避免额外样式影响
    stylesSet: [], // 清空默认样式集合
    alignment: {
      options: ['left', 'center', 'right'], // 只保留需要的对齐选项
      default: 'left' // 明确设置默认对齐为左对齐
    }
  })
  .catch(error => {
    console.error(error);
  });

如果你的工具栏里有对齐按钮，也可以确保默认选中左对齐选项。

小提示 #

先确认你使用的CKEditor版本（4还是5），因为两个版本的配置项和DOM结构差异很大，选对应版本的方案会更高效。

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