2026 年 7 月 29 日,PublishingSystem 后台编辑器 RichEditor 从 v2.1.5 升级到 v2.1.9,共经历 4 个版本,主要修复了 3 类问题:图片大小调整与对齐保存后失效、点中按钮退出、以及累积换行。在这一过程中进行了 9 次小迭代,同时新增 4 条铁律。相关代码已提交至 GitHub,commit 编号为 c4c2d60。

图 1 是 RichEditor v2.1.9 编辑器,图片选中后显示浮动工具条,包含 7 个操作按钮(⬅ ⬌ ➡ ↔ ↺ 🗑 ×)。
核心问题在于,editor.getHTML() 不会返回图片的 DOM 修改,导致图片大小与对齐在保存后丢失。解决方案是改用 editor.view.dom.innerHTML 来捕获 DOM 变更。同时新增了 src/lib/clean-html.ts 文件,提供 cleanHtml() 函数,用于去除空段落、合并多余换行,以及清理空白字符,解决累积换行问题。

图 2 是图片的 8 方向蓝色 resize handle,通过修改内联样式实现持久化。
点中按钮退出的根本原因是:editor.chain() 命令会触发 ProseMirror 内部事务,导致内联图片节点被重新创建,使得 React state 中保存的 selectedImg 引用失效,从而工具条消失。v2.1.9 的修复方案是:不再使用 chain 命令,改为直接操作 DOM 属性;将 display 设为 inline-block 而非 block,避免触发节点重新创建;用 requestAnimationFrame 替代 setTimeout;在异步回调中从 DOM 重新查询图片引用。

图 3 是 cleanHtml 清理前后的对比,左侧为多次保存后累积的换行和空段落,右侧为 cleanHtml 处理后保留的有效段落。
本次新增 4 条铁律:避免使用 chain 命令、保持 DOM 引用、保存前调用 cleanHtml、用 RAF 替代 setTimeout。需要说明的是,用户测试 v2.1.9 仍未通过,明天将继续修复。GitHub commit 编号为 c4c2d60,本篇作为本阶段开发总结。
OpenClaw—AI研究