先别急着划走，这不是概念图，也不是拼出来的截图。
打开 https://quirekit.com/demo/classic-editor，首屏就是一个真实的编辑器：一页一页的纸，打字、换行、表格跨页、切换 Canvas / SVG 渲染，全都是实时的。
[img]https://picx.zhimg.com/80/v2-c74af0dbbc1c07dfa9b44d719710de46_1440w.png[/img][i]演示里的 DOCX 导出、页眉页脚等是商业 Word 组件，编辑器框架、排版引擎和编辑器本身是开源的。[/i]
先交代下背景：我做 ProseMirror 相关的产品已经三年了，被问得最多的一句就是“能不能像 Word 一样一页一页地排”。可开源的富文本编辑器基本都做不到。今年 6 月我决定自己从头写，四个月下来，做出了 [b]QuireKit[/b]。
它不是某一个编辑器，而是[b]一整套编辑器生态[/b]：
[list]
[*][b]最底层[/b]是两套编辑器框架，写法都是 Tiptap 风格：一套基于 ProseMirror ，API 兼容 Tiptap ；一套基于 CodeMirror ，专门做 Markdown ；
[*][b]中间[/b]是自研的排版引擎、Canvas / SVG / HTML 等多种视图，以及一套统一的 UI 组件库；
[*][b]最上层[/b]是能直接用的编辑器：分页文档、块编辑器、Markdown 编辑器，还有公式、思维导图、白板、流程图这些周边编辑器。
[/list]每一层都可以单独拿去用，也可以整套组合起来。一句话说它能干嘛：[b]用它，你可以在自己的网页应用里嵌入一个像 WPS 、Google Docs 那样的文档编辑器。[/b]
[size=5]先说做出了什么[/size]
[size=4]1. 浏览器里真正分页的文档编辑器[/size]
做过在线文档的都知道，浏览器只会排一条无限长的页面。想要“一页一页的纸”，常见做法是排完再量高度、手动切页，内容一改就全乱。
QuireKit 的分页编辑器不靠 DOM 排版：[b]断行、分页、光标、选区全部自己算，再画到 Canvas 或 SVG 上[/b]。屏幕上看到的分页，就是打印出来的分页。
[list]
[*]表格可以跨页，表头自动重复
[*]公式、流程图、思维导图、白板直接放进页面里一起排版
[*]暗黑模式、中英文界面切换
[*]长文档只绘制看得见的页，滚动不卡
[/list]操作面板也不是摆设。我按 Word 的功能区逐项对过一遍：开始、插入、页面、引用、审阅、视图，加上右键菜单、格式设置面板、表格和图片的上下文工具，[b]已经有 350+ 功能能直接在界面上点出来用[/b]，还在继续补。
[b]DOCX 往返也打通了[/b]：Word 、WPS 写的文档导进来，可以接着改，再导出成 DOCX ，拿回 Word 里继续用。
[b]PDF 和 OFD 导出也是自研的[/b]：不走浏览器打印，直接复用分页排版画出来的那一份绘制指令，屏幕上一页什么样，导出的 PDF / OFD 就是什么样。OFD 是国产版式文件格式，政务、公文场景用得多。
DOCX 往返和 PDF / OFD 导出属于商业的 Word 组件，开发和评估免费。
[size=4]2. 块编辑器[/size]
不需要分页的场景，比如笔记、知识库，用块编辑器：拖拽、斜杠菜单、表格、目录都有。
[img]https://picx.zhimg.com/80/v2-ea5413ed2034b2e4a6be8001f6d8c4bb_1440w.png[/img]
它解决了一个用过 contenteditable 的人都踩过的坑：[b]你选中一段字，去工具栏输个链接，选区就没了。[/b] 在 QuireKit 里，光标和选区是自己画的，焦点跑到输入框，选区照样在。
[img]https://pica.zhimg.com/80/v2-8530709b1526e6ce0848685bda49ae3c_1440w.png[/img]
[size=4]3. Markdown 编辑器：原文一个字不丢[/size]
MD Editor 有四种视图：文档、实时预览、源码、阅读。前三种都能直接编辑，[b]改的都是同一份 Markdown 原文[/b]，中间没有转成 JSON 再转回来，所以保存时你没碰过的行，一个字符都不会变。
[img]https://picx.zhimg.com/80/v2-82fce1bf5b6a65a7f6cf55e93310941d_1440w.png[/img]
大文档也不怕。我给 Markdown 解析器加了一个“复用证明”，编辑时直接跳过没变的部分。1 MiB 的文档连续输入 20 次，实测：
[table][tr]工作量优化前优化后[/tr][tr][td]语法树访问[/td][td]107,760[/td][td]1,380 （**少了 98.7%**）[/td][/tr][tr][td]语法树比较[/td][td]153,940[/td][td]660 （**少了 99.6%**）[/td][/tr][/table][size=4]4. 一整套周边编辑器，单独也能用[/size]
公式、思维导图、白板、文本绘图（ Mermaid / PlantUML / Graphviz ）、流程图、图表、多维表格，每一个都是独立的包，不用整个编辑器也能单独装。
[img]https://picx.zhimg.com/80/v2-14a1c3efaac2ef5374490f8ae3e90f6b_1440w.png[/img]
[size=4]5. 自己设计的 UI 组件库[/size]
编辑器的操作界面比一般后台复杂得多：字体菜单、颜色选择、表格右键菜单、格式设置对话框、缩放、快捷键提示……为了让分页文档、块编辑器、Markdown 编辑器和这些周边编辑器用起来是同一种手感，我单独设计了一套 UI 组件库（ Vue + UnoCSS ），颜色、间距、字号都由同一套设计令牌管理，亮色和暗黑两套主题一键切换。
上面截图里所有的按钮、菜单和面板，都来自这套组件库，它同样是 MIT 开源的，可以单独用在你自己的项目里： https://design.quirekit.com
[size=5]再说说最难的一块：中文输入法[/size]
Canvas 上没有输入框，[b]中文输入法是最难啃的骨头[/b]。拼音还没确认的时候，字要先显示出来、把后面的内容往后推，但又不能进撤销历史、不能同步给协作者。
我的做法是：输入法组合期间，用一份“临时文档状态”去排版和绘制，等你按下确认才真正写进文档。
[img]https://picx.zhimg.com/80/v2-ff0aa0fb8f09062e6b119b7f90b53fb0_1440w.png[/img]
浏览器在输入法上的坑非常多，事件数据为空、组合结束事件不来、确认后重复插入……这套处理我单独做成了 @quirekit/ime 包，其他 Canvas 编辑器也能直接拿去用。
[size=5]底层：两套 Tiptap 风格的编辑器框架[/size]
[img]https://pica.zhimg.com/80/v2-e059d60fbf1d4730875b396ee9daad9f_1440w.png[/img]
[list]
[*]**ProseMirror 线：@quirekit/core**。保留 ProseMirror 的文档模型、命令、插件、协同，API 兼容 Tiptap ，目标是迁移一个 Tiptap 扩展时，主要只需把 @tiptap/core 的导入换成 @quirekit/core。不同的是视图层：除了原生的 DOM 视图，还能挂自己排版的 Canvas / SVG 视图（分页文档用的就是它），以及自己管光标和选区的 HTML 视图（块编辑器用的就是它）。
[*][b]CodeMirror 线：MSFE[/b]。基于 CodeMirror 和 Lezer ，Markdown 原文就是文档，扩展和命令的写法也是 Tiptap 风格。MD Editor 构建在它上面。
[/list]两套框架的成品共用一套 UI 组件库，所以分页文档、块编辑器、Markdown 编辑器看起来是一家人。熟悉 Tiptap 的话，两条线都能很快上手。
[size=5]能用吗？怎么用？[/size]
几行代码就能把 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。
[b]整套生态里开源的部分[/b]，MIT 许可，闭源商用也可以：两套编辑器框架、Canvas / SVG 排版引擎和各种视图、UI 组件库、分页 / 块 / Markdown 三个编辑器，以及公式、导图、白板这些周边编辑器。Word 兼容能力（ DOCX 往返、PDF/OFD 导出、审阅等）是单独的商业组件，开发和评估免费，不用它们也能完整使用编辑器。
目前是 alpha ，API 还会变，欢迎来试、来挑刺：
[list]
[*]在线体验： https://quirekit.com
[*]文档： https://docs.quirekit.com
[*]GitHub： https://github.com/quirekit/quirekit
[/list]觉得有意思的话，点个 Star 就是对我最大的支持。
⚠️内容来自互联网，如有侵权请点击反馈！侵权投诉