在 CKEditor 5 的架构中,数据转换(Data Conversion)和编辑器视图转换(Editing View Conversion)是其核心机制之一,用于在数据模型(Model)、数据视图(Data View) 和 编辑器视图(Editing View) 之间进行转换。
你提到的 editingDowncast
、dataDowncast
和 upcast
是这三种转换方向的具体实现。下面详细解释它们的区别和作用:
理解这三种转换之前,先明确 CKEditor 5 的三个核心层:
层级 | 说明 |
---|---|
Model(模型) | 编辑器内部的抽象数据结构,与具体渲染无关,是纯净的语义化结构。 |
Editing View(编辑视图) | 在编辑器中呈现给用户的 DOM 结构,用于用户交互(可编辑)。可能包含占位符、样式、辅助类等。 |
Data View(数据视图) | 通常是 HTML 输出(如 getData() 的结果),是模型的简化表示,用于存储或传输。 |
Data View
→ Model
示例:
editor.conversion.upcastElementToElement({
model: 'paragraph',
view: 'p'
});
✅ 关键点:
upcast
是“从外到内”,把外部 HTML 解析成编辑器内部模型。
Model
→ Data View
示例:
editor.conversion.dataDowncastAttributeToAttribute({
model: 'fontSize',
view: 'font-size',
modelElement: 'text'
});
✅ 关键点:
dataDowncast
是“输出用”,决定getData()
的最终 HTML 输出。
Model
→ Editing View
示例:
editor.conversion.editingDowncastAttributeToElement({
model: 'linkHref',
view: (value, writer) => {
return writer.createAttributeElement('a', { href: value }, { priority: 5 });
}
});
✅ 关键点:
editingDowncast
是“渲染用”,决定内容在编辑器中如何显示和交互。
外部 HTML / 粘贴内容
↓ upcast
Model ←→ (用户编辑)
↓ editingDowncast → 编辑器中显示的 DOM(可编辑)
↓ dataDowncast
getData() 输出的 HTML
场景 | 使用哪种转换 |
---|---|
把 <span > 转为模型中的 color="red" |
upcast |
模型中的 blockQuote 渲染为编辑器中的 <blockquote class="fancy"> |
editingDowncast |
模型中的 blockQuote 输出为 <blockquote> (无 class) |
dataDowncast |
给链接添加编辑时的下划线样式(但不输出) | editingDowncast |
保留字体大小样式到输出 HTML | dataDowncast |
转换类型 | 方向 | 用途 | 是否影响 getData() |
---|---|---|---|
upcast |
Data View → Model | 解析输入内容 | ❌ 不影响输出 |
dataDowncast |
Model → Data View | 生成输出 HTML | ✅ 直接决定输出 |
editingDowncast |
Model → Editing View | 渲染编辑界面 | ❌ 不影响输出 |
💡 记忆技巧:
- Upcast:从“低层”(HTML)向“高层”(Model)提升。
- Downcast:从“高层”(Model)向下输出。
- dataDowncast:输出给“数据”。
- editingDowncast:输出给“编辑界面”。
// Upcast
conversion.upcastElementToElement( config );
conversion.upcastAttributeToAttribute( config );
// Data Downcast
conversion.dataDowncastElementToElement( config );
conversion.dataDowncastAttributeToAttribute( config );
// Editing Downcast
conversion.editingDowncastElementToElement( config );
conversion.editingDowncastAttributeToElement( config );
掌握这三种转换机制,是开发 CKEditor 5 插件和自定义元素的核心基础。
https://blog.xqlee.com/article/2508191611594456.html