如何在CKEditor 5中自定义HTML源码输出响应式图片

这个需求完全具备可实现性，不需要修改CKEditor核心源码，通过官方提供的标准扩展接口就能落地。

CKEditor默认输出的figure包裹图片结构，是内置Image插件默认配置的视图转换规则，你只需要调整对应转换逻辑，就能输出符合要求的picture响应式图片结构，具体实现按以下步骤操作即可：

• 首先扩展Schema白名单
  CKEditor默认会过滤所有未注册的标签和属性，初始化编辑器时，需要先将<picture>、<source>标签，以及media、srcset、多尺寸图片地址等属性加入允许列表。如果需要保留原有的图片样式类（比如image-style-side）、图片说明、对齐/尺寸调整功能，同步配置对应属性的嵌套规则即可。
• 重写Downcast（模型转输出HTML）转换规则
  覆盖图片元素默认的downcast转换器：当内部图片模型转为输出HTML时，不再生成<figure>根节点，改为生成<picture>节点。拿到上传接口返回的小、中、大多尺寸图片地址后，依次生成对应媒体查询规则的<source>子节点，最后生成兜底的<img>子节点，把原有样式类直接绑定到<picture>标签上即可。
• 配置Upcast（输入HTML转内部模型）转换规则
  添加对应的upcast识别规则，保证编辑器加载历史内容、用户切换源码编辑模式再切回可视化模式时，能正确识别<picture>结构的响应式图片，将其转换为内部可编辑的图片模型，同时把各尺寸地址、媒体规则存在模型属性中，避免编辑过程中内容丢失。
• 兼容原有编辑交互
  把图片对齐、尺寸调整、加说明文字等原有工具栏功能的关联对象，从原来的figure调整为新的picture对应节点即可，不需要重新开发编辑交互逻辑。

注意：你给出的目标代码示例中<source>标签缺少必填的srcset属性，缺少这个属性浏览器无法识别响应式规则，正确的标签格式参考如下：

<picture class="image image-style-side">
  <source media="(max-width: 799px)" srcset="小尺寸图片地址">
  <source media="(min-width: 800px)" srcset="中尺寸图片地址">
  <img src="大尺寸兜底图片地址" alt="图片说明">
</picture>

内容的提问来源于stack exchange，提问作者Alex Kessinger