做了三年 ProseMirror 后，我用四个月自研排版引擎实现 WPS / Google Docs 替代品，整套框架 MIT 开源

🐈nicoID265 · 半小时前

先别急着划走，这不是概念图，也不是拼出来的截图。
打开 https://quirekit.com/demo/classic-editor，首屏就是一个真实的编辑器：一页一页的纸，打字、换行、表格跨页、切换 Canvas / SVG 渲染，全都是实时的。

演示里的 DOCX 导出、页眉页脚等是商业 Word 组件，编辑器框架、排版引擎和编辑器本身是开源的。
先交代下背景：我做 ProseMirror 相关的产品已经三年了，被问得最多的一句就是“能不能像 Word 一样一页一页地排”。可开源的富文本编辑器基本都做不到。今年 6 月我决定自己从头写，四个月下来，做出了 QuireKit。
它不是某一个编辑器，而是一整套编辑器生态：

最底层是两套编辑器框架，写法都是 Tiptap 风格：一套基于 ProseMirror ，API 兼容 Tiptap ；一套基于 CodeMirror ，专门做 Markdown ；
中间是自研的排版引擎、Canvas / SVG / HTML 等多种视图，以及一套统一的 UI 组件库；
最上层是能直接用的编辑器：分页文档、块编辑器、Markdown 编辑器，还有公式、思维导图、白板、流程图这些周边编辑器。

每一层都可以单独拿去用，也可以整套组合起来。一句话说它能干嘛：用它，你可以在自己的网页应用里嵌入一个像 WPS 、Google Docs 那样的文档编辑器。
先说做出了什么

1. 浏览器里真正分页的文档编辑器

做过在线文档的都知道，浏览器只会排一条无限长的页面。想要“一页一页的纸”，常见做法是排完再量高度、手动切页，内容一改就全乱。
QuireKit 的分页编辑器不靠 DOM 排版：断行、分页、光标、选区全部自己算，再画到 Canvas 或 SVG 上。屏幕上看到的分页，就是打印出来的分页。

表格可以跨页，表头自动重复
公式、流程图、思维导图、白板直接放进页面里一起排版
暗黑模式、中英文界面切换
长文档只绘制看得见的页，滚动不卡

操作面板也不是摆设。我按 Word 的功能区逐项对过一遍：开始、插入、页面、引用、审阅、视图，加上右键菜单、格式设置面板、表格和图片的上下文工具，已经有 350+ 功能能直接在界面上点出来用，还在继续补。
DOCX 往返也打通了：Word 、WPS 写的文档导进来，可以接着改，再导出成 DOCX ，拿回 Word 里继续用。
PDF 和 OFD 导出也是自研的：不走浏览器打印，直接复用分页排版画出来的那一份绘制指令，屏幕上一页什么样，导出的 PDF / OFD 就是什么样。OFD 是国产版式文件格式，政务、公文场景用得多。
DOCX 往返和 PDF / OFD 导出属于商业的 Word 组件，开发和评估免费。
2. 块编辑器

不需要分页的场景，比如笔记、知识库，用块编辑器：拖拽、斜杠菜单、表格、目录都有。

它解决了一个用过 contenteditable 的人都踩过的坑：你选中一段字，去工具栏输个链接，选区就没了。 在 QuireKit 里，光标和选区是自己画的，焦点跑到输入框，选区照样在。

3. Markdown 编辑器：原文一个字不丢

MD Editor 有四种视图：文档、实时预览、源码、阅读。前三种都能直接编辑，改的都是同一份 Markdown 原文，中间没有转成 JSON 再转回来，所以保存时你没碰过的行，一个字符都不会变。

大文档也不怕。我给 Markdown 解析器加了一个“复用证明”，编辑时直接跳过没变的部分。1 MiB 的文档连续输入 20 次，实测：
工作量优化前优化后语法树访问107,7601,380 （**少了 98.7%**）语法树比较153,940660 （**少了 99.6%**）4. 一整套周边编辑器，单独也能用

公式、思维导图、白板、文本绘图（ Mermaid / PlantUML / Graphviz ）、流程图、图表、多维表格，每一个都是独立的包，不用整个编辑器也能单独装。

5. 自己设计的 UI 组件库

编辑器的操作界面比一般后台复杂得多：字体菜单、颜色选择、表格右键菜单、格式设置对话框、缩放、快捷键提示……为了让分页文档、块编辑器、Markdown 编辑器和这些周边编辑器用起来是同一种手感，我单独设计了一套 UI 组件库（ Vue + UnoCSS ），颜色、间距、字号都由同一套设计令牌管理，亮色和暗黑两套主题一键切换。
上面截图里所有的按钮、菜单和面板，都来自这套组件库，它同样是 MIT 开源的，可以单独用在你自己的项目里： https://design.quirekit.com
再说说最难的一块：中文输入法

Canvas 上没有输入框，中文输入法是最难啃的骨头。拼音还没确认的时候，字要先显示出来、把后面的内容往后推，但又不能进撤销历史、不能同步给协作者。
我的做法是：输入法组合期间，用一份“临时文档状态”去排版和绘制，等你按下确认才真正写进文档。

浏览器在输入法上的坑非常多，事件数据为空、组合结束事件不来、确认后重复插入……这套处理我单独做成了 @quirekit/ime 包，其他 Canvas 编辑器也能直接拿去用。
底层：两套 Tiptap 风格的编辑器框架

**ProseMirror 线：@quirekit/core**。保留 ProseMirror 的文档模型、命令、插件、协同，API 兼容 Tiptap ，目标是迁移一个 Tiptap 扩展时，主要只需把 @tiptap/core 的导入换成 @quirekit/core。不同的是视图层：除了原生的 DOM 视图，还能挂自己排版的 Canvas / SVG 视图（分页文档用的就是它），以及自己管光标和选区的 HTML 视图（块编辑器用的就是它）。
CodeMirror 线：MSFE。基于 CodeMirror 和 Lezer ，Markdown 原文就是文档，扩展和命令的写法也是 Tiptap 风格。MD Editor 构建在它上面。

两套框架的成品共用一套 UI 组件库，所以分页文档、块编辑器、Markdown 编辑器看起来是一家人。熟悉 Tiptap 的话，两条线都能很快上手。
能用吗？怎么用？

几行代码就能把 Markdown 编辑器放进 Vue 项目：
npm install @quirekit/md-editor@alpha<script setup lang="ts">import { MdEditor } from '@quirekit/md-editor/vue'import '@quirekit/md-editor/styles.css'</script><template> <MdEditor markdown="# Hello" label="Document" /></template>块编辑器和分页编辑器分别是 @quirekit/block-editor、@quirekit/classic-editor。
整套生态里开源的部分，MIT 许可，闭源商用也可以：两套编辑器框架、Canvas / SVG 排版引擎和各种视图、UI 组件库、分页 / 块 / Markdown 三个编辑器，以及公式、导图、白板这些周边编辑器。Word 兼容能力（ DOCX 往返、PDF/OFD 导出、审阅等）是单独的商业组件，开发和评估免费，不用它们也能完整使用编辑器。
目前是 alpha ，API 还会变，欢迎来试、来挑刺：

在线体验： https://quirekit.com
文档： https://docs.quirekit.com
GitHub： https://github.com/quirekit/quirekit

觉得有意思的话，点个 Star 就是对我最大的支持。

⚠️内容来自互联网，如有侵权请点击反馈！侵权投诉

做了三年 ProseMirror 后，我用四个月自研排版引擎实现 WPS / Google Docs 替代品，整套框架 MIT 开源

回复

快捷访问

附加功能

关于我们

关注我们