Vue2项目迁移Quill至CKEditor5：为编辑器输出添加容器兼容样式

方法1：手动包裹编辑器内容 #

当你需要获取编辑器内容（比如提交表单时），直接将editor.getData()的结果用目标容器包裹：

// 在Vue组件的提交方法中
submitForm() {
  const rawContent = this.$refs.ckEditor.editor.getData();
  // 包裹自定义容器
  const wrappedContent = `<div class="ck-content ck-output-container">${rawContent}</div>`;
  // 后续将wrappedContent提交到后端或用于展示
  this.form.content = wrappedContent;
}

方法2：重写CKEditor的getData方法（自动包裹） #

在编辑器初始化完成后，覆盖原生的getData方法，让它自动给输出添加外层容器：

<template>
  <ckeditor
    ref="ckEditor"
    :editor="ClassicEditor"
    :config="editorConfig"
    @ready="handleEditorReady"
  ></ckeditor>
</template>

<script>
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

export default {
  components: {
    ckeditor: () => import('@ckeditor/ckeditor5-vue2')
  },
  data() {
    return {
      ClassicEditor,
      editorConfig: {
        // 你的编辑器配置，比如工具栏、语言等
        language: 'zh-cn'
      }
    };
  },
  methods: {
    handleEditorReady(editor) {
      // 保存原始getData方法
      const originalGetData = editor.getData;
      // 重写getData，自动添加容器
      editor.getData = function(options) {
        const content = originalGetData.call(this, options);
        return `<div class="ck-content ck-output-container">${content}</div>`;
      };
    }
  }
};
</script>

方法3：展示时添加容器（后端未存储容器的情况） #

如果后端存储的是CKEditor的原始内容，没有外层容器，可以在展示内容的组件中直接包裹：

<template>
  <!-- 用目标容器包裹内容，隔离Quill样式 -->
  <div class="ck-content ck-output-container" v-html="renderContent"></div>
</template>

<script>
export default {
  props: {
    renderContent: {
      type: String,
      default: ''
    }
  }
};
</script>

<style scoped>
/* 重置Quill对列表的影响，确保CKEditor样式正常 */
.ck-output-container ul,
.ck-output-container li {
  list-style: disc;
  margin-left: 1.5em;
  padding: 0;
}
/* 引入CKEditor的内容样式，确保容器内样式正常 */
@import '@ckeditor/ckeditor5-build-classic/build/styles.css';
</style>

额外说明 #

• 方法2适合需要统一处理输出的场景，确保每次调用editor.getData()都自动带上容器；
• 若要更彻底的样式隔离，可给ck-output-container添加all: unset重置继承样式后，再引入CKEditor的样式；
• 避免直接修改CKEditor核心代码，通过重写方法或外层包裹的方式更易维护。

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