CKEditor5 技术问题：重新编辑已保存内容时如何让编辑器识别自定义两栏布局部件

嘿，这个问题我做自定义CKEditor部件时也踩过一模一样的坑！核心原因其实很明确：你只配置了编辑状态下的向下转换（editingDowncast），但完全没做从HTML到模型的向上转换（upcast）。

第一次编辑时，你是直接从编辑器模型生成部件UI，所以一切正常；但保存后再打开，编辑器是从存储的HTML内容反向解析到模型——如果没有upcast规则，它只会把你的<section>和<div>当成普通HTML元素，根本不知道这是你定义的twoColumns和column模型节点，自然不会加载部件的交互UI（比如轮廓、聚焦样式、操作按钮）。

下面是具体的解决步骤，直接补全你的代码就行：

1. 补充Upcast转换规则 #

你需要告诉CKEditor：当看到前端的特定HTML结构时，要把它转换成对应的模型节点。把这段代码加到你的转换配置里：

// 把HTML中的section（带对应布局class）转换为model的twoColumns节点
conversion.for('upcast').elementToElement({
  view: {
    name: 'section',
    // 匹配你保存到HTML里的布局class，支持正则或具体类名
    classes: [/^two-columns-.*/] // 比如匹配two-columns-50-50、two-columns-80-20等
  },
  model: (viewElement, { writer: modelWriter }) => {
    // 把HTML元素的class属性同步到模型节点
    const className = viewElement.getAttribute('class');
    return modelWriter.createElement('twoColumns', { class: className });
  }
});

// 把HTML中的.layout_column div转换为model的column节点
conversion.for('upcast').elementToElement({
  view: {
    name: 'div',
    classes: 'layout_column'
  },
  model: 'column'
});

2. 确保部件的完整注册 #

还要确认你已经正确完成了部件的基础配置：

• 确保Widget和WidgetToolbar（如果用到工具栏按钮）已经加入到编辑器的插件列表中
• 你的twoColumns模型节点已经被定义为部件容器，column是可编辑的部件子节点（你之前downcast里用的toWidget和toWidgetEditable这部分是对的）

3. 验证转换是否生效 #

做完配置后，你可以通过浏览器控制台打印编辑器模型结构（比如editor.model.document.getRoot().getChild(0)），确认重新加载内容后，模型里确实生成了twoColumns和column节点，而不是普通的section/div。

另外要注意：你保存到后端的HTML结构，必须和upcast规则里匹配的结构完全一致——比如class名称不能有拼写错误，嵌套层级要和你定义的模型结构一致（twoColumns包含column节点）。

这样调整后，当你重新打开编辑内容时，CKEditor就能正确识别出这是你的自定义部件，对应的交互UI也就回来了！

备注：内容来源于stack exchange，提问作者techenzie