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

king王一帅
0 阅读6分钟

先别急着划走，这不是概念图，也不是拼出来的截图。

打开 quirekit.com/demo/classi…，首屏就是一个真实的编辑器：一页一页的纸，打字、换行、表格跨页、切换 Canvas / SVG 渲染，全都是实时的。

02-classic-paged.png 演示里的 DOCX 导出、页眉页脚等是商业 Word 组件，编辑器框架、排版引擎和编辑器本身是开源的。

这是我过去四个月在做的 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. 块编辑器

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

05-block-editor.png

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

04-view-html-selection.png

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

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

06-md-editor-views.png

大文档也不怕。我给 Markdown 解析器加了一个“复用证明”，编辑时直接跳过没变的部分。1 MiB 的文档连续输入 20 次，实测：

工作量优化前优化后
语法树访问107,7601,380（少了 98.7%）
语法树比较153,940660（少了 99.6%）

4. 一整套周边编辑器，单独也能用

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

07-editors.png

5. 自己设计的 UI 组件库

编辑器的操作界面比一般后台复杂得多：字体菜单、颜色选择、表格右键菜单、格式设置对话框、缩放、快捷键提示……为了让分页文档、块编辑器、Markdown 编辑器和这些周边编辑器用起来是同一种手感，我单独设计了一套 UI 组件库（Vue + UnoCSS），颜色、间距、字号都由同一套设计令牌管理，亮色和暗黑两套主题一键切换。

上面截图里所有的按钮、菜单和面板，都来自这套组件库，它同样是 MIT 开源的，可以单独用在你自己的项目里：design.quirekit.com

再说说最难的一块：中文输入法

Canvas 上没有输入框，中文输入法是最难啃的骨头。拼音还没确认的时候，字要先显示出来、把后面的内容往后推，但又不能进撤销历史、不能同步给协作者。

我的做法是：输入法组合期间，用一份“临时文档状态”去排版和绘制，等你按下确认才真正写进文档。

03-ime-flow.png

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

底层：两套 Tiptap 风格的编辑器框架

01-architecture.png

  • 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 还会变，欢迎来试、来挑刺：

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

avatar
文章
阅读
粉丝