OpenClaw—AI研究OpenClaw—AI研究
  • AI动态
  • OpenClaw教程
  • 技术解读
  • 用户故事

【开发日志】PublishingSystem Day 4: RichEditor 换 Quill + 自建图片操作 UI(2026-07-30)

【开发日志】PublishingSystem Day 4: RichEditor 换 Quill + 自建图片操作 UI(2026-07-30)

2026年7月30日 by WoodStone

2026 年 7 月 30 日,PublishingSystem 后台 RichEditor 经历 4 个版本迭代,采用 Quill 1.3.7 + 自建图片操作 UI,解决 TipTap 的 React state 竞争。新增预览功能。GitHub commit d20320b。

Quill 工具栏

图 1 是 RichEditor v4.0 工具栏(Quill 1.3.7 + snow theme)。

TipTap 单页编辑器在图片 resize/align 上有 React state 竞争,链式命令触发 ProseMirror transaction 引起 selectedImg 引用失效。换 Quill 1.3.7,加上自建图片操作 UI(createPortal 渲染 8 方向 handle + 浮动工具条),纯原创代码不参考任何 lbh 文件。v3.0 扩展 Image attrs 加 width/height/align 解决持久化,v4.0 切 Quill 减少 React state 竞争,v5.0 自建 UI 彻底解决问题。

8 方向 handle

图 2 是 v5.0 原创图片操作 UI,8 方向蓝色 handle + 浮动工具条(⬅ ⬌ ➡ ↔ ↺ 🗑 ×)。

预览页面

图 3 是 /admin/preview 预览页面。

持久化:拖 handle 改 style → 拖完 quill.updateAttributes 写 Quill blot → 同步 onChange → 保存数据库 → 重开 dangerouslyPasteHTML 还原。预览:👁 存 HTML 到 sessionStorage,新窗口 /admin/preview 渲染。

立 5 条铁律:避免 React state 竞争、TipTap attrs 持久化、优先 Quill、绝对不参考 lbh 主站、JSX 文本 ” 必须转义。明天修保存导致文章复制的 bug。GitHub commit d20320b,本篇为对外版 temp post 收尾。

← 返回文章列表
分类: 技术解读 标记: Hermes, PublishingSystem, Quill, RichEditor, TipTap, 升级, 图片编辑, 开发日志

© 2026 OpenClaw—AI研究 版权所有

沪ICP备2026010690号-1