CKeditor 5 editingDowncast dataDowncast upcast 区别和作用

编程教程 > WEB > Web Editor (1) 2025-08-19 16:33:58

在 CKEditor 5 的架构中,数据转换(Data Conversion)和编辑器视图转换(Editing View Conversion)是其核心机制之一,用于在数据模型(Model)数据视图(Data View)编辑器视图(Editing View) 之间进行转换。

你提到的 editingDowncastdataDowncastupcast 是这三种转换方向的具体实现。下面详细解释它们的区别和作用:


1. CKEditor 5 的三层架构

理解这三种转换之前,先明确 CKEditor 5 的三个核心层:

层级 说明
Model(模型) 编辑器内部的抽象数据结构,与具体渲染无关,是纯净的语义化结构。
Editing View(编辑视图) 在编辑器中呈现给用户的 DOM 结构,用于用户交互(可编辑)。可能包含占位符、样式、辅助类等。
Data View(数据视图) 通常是 HTML 输出(如 getData() 的结果),是模型的简化表示,用于存储或传输。

2. 三种转换方向

(1) Upcast(上行转换 / Upcasting)

  • 方向Data ViewModel
  • 触发时机
    • 编辑器初始化时,将原始 HTML 内容解析为模型。
    • 粘贴内容时,将外部 HTML 转换为模型。
  • 作用
    • 解析原始 HTML(如 <p class="intro">Hello</p>)并将其转换为模型中的元素(如 <paragraph class="intro">Hello</paragraph>)。
    • 提取语义信息,忽略无关的样式或结构。
  • 示例

    editor.conversion.upcastElementToElement({
      model: 'paragraph',
      view: 'p'
    });

关键点upcast 是“从外到内”,把外部 HTML 解析成编辑器内部模型。


(2) Data Downcast(数据下行转换)

  • 方向ModelData View
  • 触发时机
    • 调用 editor.getData() 时。
    • 导出内容为 HTML。
  • 作用
    • 将模型转换为标准 HTML(或其他数据格式)。
    • 通常生成简洁、语义清晰、可用于存储的 HTML。
  • 示例

    editor.conversion.dataDowncastAttributeToAttribute({
      model: 'fontSize',
      view: 'font-size',
      modelElement: 'text'
    });

关键点dataDowncast 是“输出用”,决定 getData() 的最终 HTML 输出。


(3) Editing Downcast(编辑视图下行转换)

  • 方向ModelEditing View
  • 触发时机
    • 模型变化时,实时更新编辑器中的 DOM。
    • 用户输入、格式化、插件修改模型时。
  • 作用
    • 将模型渲染为可编辑的 DOM。
    • 可以添加辅助类、占位符、装饰器等,仅用于编辑体验,不出现在最终数据中。
  • 示例

    editor.conversion.editingDowncastAttributeToElement({
      model: 'linkHref',
      view: (value, writer) => {
        return writer.createAttributeElement('a', { href: value }, { priority: 5 });
      }
    });

关键点editingDowncast 是“渲染用”,决定内容在编辑器中如何显示和交互。


3. 三者关系图示

外部 HTML / 粘贴内容
        ↓ upcast
      Model  ←→ (用户编辑)
        ↓ editingDowncast → 编辑器中显示的 DOM(可编辑)
        ↓ dataDowncast
     getData() 输出的 HTML

4. 实际应用场景对比

场景 使用哪种转换
<span > 转为模型中的 color="red" upcast
模型中的 blockQuote 渲染为编辑器中的 <blockquote class="fancy"> editingDowncast
模型中的 blockQuote 输出为 <blockquote>(无 class) dataDowncast
给链接添加编辑时的下划线样式(但不输出) editingDowncast
保留字体大小样式到输出 HTML dataDowncast

5. 总结

转换类型 方向 用途 是否影响 getData()
upcast Data View → Model 解析输入内容 ❌ 不影响输出
dataDowncast Model → Data View 生成输出 HTML ✅ 直接决定输出
editingDowncast Model → Editing View 渲染编辑界面 ❌ 不影响输出

💡 记忆技巧

  • Upcast:从“低层”(HTML)向“高层”(Model)提升。
  • Downcast:从“高层”(Model)向下输出。
    • dataDowncast:输出给“数据”。
    • editingDowncast:输出给“编辑界面”。

6. 扩展:Conversion API 常用方法

// 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 插件和自定义元素的核心基础。


评论
User Image
提示:请评论与当前内容相关的回复,广告、推广或无关内容将被删除。

相关文章
在 CKEditor 5 的架构中,数据转换(Data Conversion)和编辑器视图转换(Editing View Conversion)是其核心机制之一
ckeditor 5 自定义插件实现,自定义一个插件并在toolbar上。点击自定义插件图标响应对应事件。环境ckeditor 5.42.1(github稳定版
ckeditor5 图片上传地址配置,ckeditor5和4的图片上传配置有点不一样。首先是确定你选的上传支持插件是什么,我这里是下面这个插件ckfinder
1.引入依赖js文件&lt;script type="text/javascript" src="/plugin/ckeditor5/ckeditor.js"&gtl;&lt;/s
CKEditor 5 不重新构建移除某个plugin控件组件参考代码:ClassicEditor .create( document.querySelector...
ckeditor5使用demo,配置详情参考。官网相关资源查阅,组件配置
在CKEditor4版本中,对于编辑器高度设置是通过config配置里面的属性height来实现的,如下方所示CKEditor5 版本查文档发现已经没有这个配置了,通过网络资料查询得知,CKEd...
[JAVA]_图文详解CKeditor4.4.X版本添加程序代码高亮插件codesnippet1.去CKeditor官网下载4.4.X及以上版本官网直通车:点击
CKeditor5代码片段是官方自己集成的。可以通过在线构建的时候选择Code blocks 组件。选择后默认支持一下代码语言,是通过pre标签+code标签实现的。[ { langu...
CKeditor无论那个版本,在我主要以文章编辑的时候,需要去掉默认的H1标签,所以需要自定义配置heading标签。同样CKeditor5 与之前的4版本有所不同。CKeditor5自定义配置...
CKeditor5 默认情况下的fontsize组件是小号默认大号特大号这种,没有具体的字体大小px单位选择,有些时候需要配置。故而对默认配置进行了修改。配置方式如下: C...
针对CKEditor5是否开源免费,我们阅读官方响应文档得到下面的结果:所有下载均受相关开源许可协议或商业许可协议(以适用者为准)的约束。 再查阅更详细的文档,
在ckeditor4的时候绑定blur事件代码如下:window.editor.on('blur',function(){//这里写你想做的事儿})同样的代码搬到ckeditor5不仅不能用,还...
CKeditor 5.0 如何获取纯文本数据,ckeditor官方其实提供了获取带html脚本的内容方法,只需要配合jQuery简单就获取到了文本内容,详细操作如下
ckeditor4的早期版本,图片上传组件。默认情况会有以下图片预览描述文字,如下图所示:上图红色圈出部分即为图片预览的描述。这个放到应用中会感觉很奇怪。所以多