CKEditor 5 输出内容包裹容器元素，解决样式冲突

2024-11-06 03:00:07

CKEditor 5 输出内容包裹容器元素

在将富文本编辑器从 Quill 迁移到 CKEditor 5 的过程中，保持向后兼容性至关重要。这意味着需要保留原有的 Quill CSS 样式及其相关的 HTML 结构。但 Quill 的样式可能会与 CKEditor 5 的样式冲突，特别是在处理列表等嵌套元素时。一种有效的解决方案是将 CKEditor 5 的输出内容包裹在一个容器元素中，并为该容器指定独立的样式，从而避免样式冲突。本文将探讨几种实现此目标的方法。

方法一：后处理 HTML 输出

最直接的方法是在获取 CKEditor 5 的 HTML 输出后，使用 JavaScript 或后端代码将其包裹在所需的容器元素中。

代码示例 (JavaScript):

const editorData = editor.getData(); // 获取 CKEditor 5 的输出
const wrappedHTML = `<div class="ck-content ck-output-container">${editorData}</div>`;
// 将 wrappedHTML 用于渲染

操作步骤：

使用 editor.getData() 获取 CKEditor 5 编辑器的 HTML 输出。
使用模板字符串或其他字符串拼接方法，将获取的 HTML 内容包裹在 <div class="ck-content ck-output-container"> 和 </div> 之间。
将生成的 wrappedHTML 用于最终的渲染，例如将其设置为 Vue 组件的 innerHTML。

原理：

这种方法简单直接，通过字符串操作实现包裹效果，不涉及 CKEditor 5 的内部机制。

安全建议：

如果 editorData 中包含用户输入的内容，需要对其进行安全过滤，以防止 XSS 攻击。可以使用 DOMPurify 等库对 HTML 进行清理。

方法二：自定义 Data Processor

CKEditor 5 提供了 Data Processor，允许开发者在数据进出编辑器时对其进行转换。可以利用 Data Processor 在数据输出时添加容器元素。

代码示例 (JavaScript):

ClassicEditor
    .create( document.querySelector( '#editor' ), {
      dataProcessor: {
          // 输出数据时添加容器
          toView: (data) => `<div class="ck-content ck-output-container">${data}</div>`,
          // 输入数据时移除容器 (可选)
          toData: (viewFragment) => {
             const container = viewFragment.getChild(0);
             return container.getChildren().map(child => child.getHtml()).join('')
          },


      },

    } )
    .then( ... )
    .catch( ... );

操作步骤：

在 ClassicEditor.create() 方法的配置对象中，添加 dataProcessor 属性。
dataProcessor 包含 toView 和 toData 两个函数。 toView 函数在数据输出到视图时调用，toData 函数在数据从视图输入到编辑器数据模型时调用。
在 toView 函数中，将传入的 data (即编辑器输出的 HTML) 包裹在容器元素中并返回。
(可选) 在 toData 函数中，实现反向操作，即移除容器元素，以便正确处理输入数据。这对于保持编辑器内容和数据库内容一致至关重要。