如何将带Quill特定类的HTML转换为CKEditor5兼容的内联样式？

我完全懂你现在的困扰：从Quill切换到CKEditor5后，数据库里存的旧内容（带ql-*类的HTML）在CKEditor5里打开样式全没了，自己写的转换插件也没生效。别慌，问题出在转换规则的方向搞反了，咱们一步步来搞定它。

为什么你的插件没生效？ #

你写的attributeToAttribute规则是把编辑器内部的model属性映射到输出的HTML类（也就是downcast阶段），但我们需要的是反过来：当CKEditor5读取旧的Quill HTML时，要把ql-align-center这类class识别为编辑器能理解的model属性（upcast阶段）。方向搞反了，自然没法识别旧样式。

正确的转换插件写法 #

我们需要编写upcast转换规则，告诉CKEditor5：看到带ql-align-*类的<p>标签时，把它转换成带有对应align属性的model段落（Alignment插件已经定义了这个align属性）。

修改你的plugin.js：

export default (editor) => {
  // 定义Quill类和CKEditor5对齐属性的映射
  const alignClassMap = {
    'ql-align-left': 'left',
    'ql-align-center': 'center',
    'ql-align-right': 'right',
    'ql-align-justify': 'justify'
  };

  // 遍历所有对齐类型，添加upcast转换规则
  Object.entries(alignClassMap).forEach(([quillClass, ckAlignValue]) => {
    editor.conversion.for('upcast').elementToElement({
      view: {
        name: 'p',
        classes: quillClass
      },
      model: (viewElement, writer) => {
        // 创建model段落元素
        const paragraph = writer.createElement('paragraph');
        // 给段落添加align属性
        writer.setAttribute('align', ckAlignValue, paragraph);
        return paragraph;
      }
    });
  });

  // （可选）如果需要强制输出内联样式而非class，可添加downcast规则
  // 其实Alignment插件默认已经会把align属性转为text-align内联样式，这步可省略
  // editor.conversion.for('downcast').attributeToAttribute({
  //   model: 'align',
  //   view: (value) => ({
  //     key: 'style',
  //     value: `text-align: ${value};`
  //   })
  // });
};

配置和验证 #

确保你的编辑器配置里已经正确引入了Alignment插件和自定义插件：

// richTextEditor.js
<template>
    <div>
        <ckeditor :editor="editor" v-model="htmlForEditor" :config="editorConfig" ></ckeditor>
    </div>
</template>
<script>
import CKEditor from '@ckeditor/ckeditor5-vue'
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor'
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials'
import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment'
import QuillAlignConverter from '@/path/to/plugin' // 改名让功能更清晰

export default {
    components:{ ckeditor: CKEditor.component },
    data: function (){
        return {
            editor: ClassicEditor,
            htmlForEditor: inputHtmlThatCameFromQuill,
            editorConfig: {
                plugins: [ Essentials, Alignment, QuillAlignConverter ],
                toolbar: { items: [ 'alignment' ] }
            }
        }
    }
}
</script>

现在测试一下：当你传入Quill生成的<p class="ql-align-center">text</p>时，CKEditor5应该能正确识别为居中对齐的段落，编辑后输出的HTML会是带有style="text-align: center;"的<p>标签，样式再也不会丢失了。

扩展提示 #

如果还有其他Quill样式需要转换（比如字体、字号、颜色等），都可以用类似的思路：

1. 找到CKEditor5对应的model属性（比如字体对应fontFamily，字号对应fontSize）
2. 编写upcast规则，把Quill的class转换为这些model属性
3. 确保对应的CKEditor5插件已经引入（比如Font插件）

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