1723 天,1460 次提交:我的 Canvas 富文本编辑器,今天 1.0 了
1723 天前,我提交了 Canvas Editor 的第一行代码。1460 次提交之后,它正式发布了 1.0.0。促成 1.0 的最后一块拼图,是一个挂了 1556 天的 issue(#41)。2022 年 4 月 28 日,有用户留下一句话:跨页表格在修改列宽的时候,不能够同步。1556 天、39 条讨论之后,这个 issue 随 1.0 一起关闭。这篇文章聊三件事:表格分页为什么难、最终的解法是什么、1.0 还有哪些东西。项目是什么Canvas Editor 是一个基于原生 Canvas 渲染的富文本编辑器:不用 contenteditable,不用 DOM 排版,文档里每一个字、每一条表格线、每一个分页符,都是 Canvas API 画出来的。为什么走这条更难的路线?因为目标场景是电子病历(EMR)、合同、公文这类严肃文书——表格跨页列宽不能错、修改要留痕、控件要能级联校验、打印要和屏幕所见尽量一致。而这些,恰好是 contenteditable 最不稳定的地方。2021 年 11 月 12 日第一次提交,到 1.0.0 发布:1723 天、1460 次提交、139 个版本。表格分页:为什么一个 issue 能挂四年跨页表格是 Canvas 编辑器里最复杂的渲染路径之一:表格行要在页边界动态拆分,拆分点随内容变化;拆分后,各页列宽必须严格一致;单元格里如果有图片、列表、子表格,行高要随内容自适应;光标、选区、中文输入法,都要在分页之后正确响应。方案演进:数据层拆分 → 渲染层切分第一版思路(2024 年前后):数据层拆分。把超出当前页的行拆出来,物理上形成一个新表格;渲染时先合并再拆分,保存时再合并。这个方案解决了能分页,但天花板很低:分页后的表格一变就无法还原,合并行单元格跨页失效、单格超高不跨页、控件跨行丢内容……issue 里这类边界反馈持续出现。本质问题是:数据被物理切成两段之后,所有操作都要为同步两段状态付代价,而边界的组合是无穷的。社区协作(2025)。期间社区陆续贡献了一些思路和 PR。结合这些实现,我在poc/table-paging分支做了可行性验证,梳理出一张完整的待办清单:跨页中文输入、跨页删除/书写/方向键光标、选区跨页拖蓝、控件跨页、复合元素跨页、边界处理。这张清单,基本划定了这个问题的真实工作量。最终方案(2026.07):渲染层切分。核心思路转换:放弃数据层的物理切割,只在渲染层切分——文档数据始终保持完整,只在 Canvas 绘制阶段计算分页截断位置。相当于一次降维:之前大量的状态同步类 bug 不是被修掉的,而是不再存在了。这次改动的规模(commit: feat: optimize table pagination #41)新增TablePaging分页计算模块,约 740 行:负责跨页截断点的测量;重写TableParticle渲染逻辑,约 510 行改动;Position光标系统跨页适配,约 500 行改动:覆盖跨页中文输入、删除/书写/方向键光标、选区拖蓝;配套1600 行单元测试;合计3373 行新增。同时落地:rowspan 高内容单元格行高自适应、表格宽度自适应内容与页面(#1387 #1453)、跨页列宽同步。补充一句:最后的重构阶段使用了 AI 编程工具辅助,效率提升明显,这点在 issue 里也有公开说明。四年的断断续续思考、社区 PR 的思路、工具效率的提升,三件事叠在一起,才把这块硬骨头啃下来。1.0 还带了什么 留痕模式(#312)—— 类 Word 修订:增删改留痕,删除内容划删除线,悬停显示谁改的、什么时候改的,痕迹可见性可控。病历质控、合同审阅、公文批改都能直接用。 控件级联与表达式(#671)—— Select/Radio/Checkbox/文本控件之间建立父子联动 校验,支持表达式自动计算:输入身高 170cm、体重 100kg,BMI 自动算出 34.6 并联动肥胖干预建议;选有高血压,自动带出高血压分级必填。文档模板可以自带一部分业务逻辑。 排版能力—— 多栏布局(#1237)、图片四周环绕(#554,签名图文字绕排)、水平垂直双标尺(#438)、多级有序列表(#440)。 区域子文档—— 一份文档内划分多个独立编辑区(主病历 补充病历各管各的,还能放进表格单元格),配套完整的 Area API。此外还有控件嵌套(#425)、宏录制回放(#478)、文档对比 API(#1024)等,完整清单在 Release Notes。一些数据项目在业余时间维护,数据全部可查:1723 天,1460 次提交,139 个版本,479 个 issue 被处理近 3 年 781 次提交;162 次提交发生在深夜 10 点以后,245 次在周末GitHub 5000 Star,845 Fork1.0 不是一个人的结果:#41 的最终方案吸收了多位社区同学 PR 的思路,在 POC 分支公开验证过;issue 区里持续反馈边界 case 的用户,实际上帮项目做了大量测试。一个问题挂了四年,最后是很多人一起把它推过终点线的。1.0 之后API 冻结,进入 SemVer,1.x 无破坏性变更。0.9.x 用户可以直接升:npm install hufe921/canvas-editor1.0.0路线图(按优先级):大文本渲染性能、渲染层独立(同一份文档模型可输出 SVG/PDF/DOM)、多光标选区、协作编辑能力——哪个呼声高先做哪个。项目会一直 MIT 开源。如果它对你有用,Star、转发都是支持;想赞助的话文末有渠道,量力而行。项目地址GitHub:https://github.com/Hufe921/canvas-editor在线 Demo:https://hufe.club/canvas-editor文档:https://hufe.club/canvas-editor-docs赞助:https://hufe.club/donate.jpg如果你也在维护长线开源项目,欢迎评论区交流

相关新闻

基于Xadow与VEML6075的便携式紫外线监测仪DIY全攻略

基于Xadow与VEML6075的便携式紫外线监测仪DIY全攻略

1. 项目概述:为什么我们需要一个便携的紫外线监测方案?在户外活动日益丰富的今天,无论是周末的徒步、骑行,还是日常的通勤、遛娃,我们暴露在阳光下的时间其实远超想象。阳光中的紫外线(UV)是双刃…

2026/11/2 8:58:35 阅读更多 →
嵌入式硬件适配器设计:从接口匹配到系统集成的完整实践

嵌入式硬件适配器设计:从接口匹配到系统集成的完整实践

1. 项目缘起:当Pebble Time遇上RePhone Kit几年前,我手头有一块Pebble Time智能手表和一套Seeed Studio的RePhone Kit。Pebble Time以其独特的电子墨水屏、超长续航和开放的开发环境,在智能手表早期玩家心中有着特殊地位。而RePhone Kit则是一…

2026/11/2 8:58:38 阅读更多 →
XIAO RP2350嵌入式开发实战:C/C++ SDK环境搭建与双核编程

XIAO RP2350嵌入式开发实战:C/C++ SDK环境搭建与双核编程

1. 项目概述:为什么是 XIAO RP2350 与 C/C SDK?如果你正在寻找一款性能足够、尺寸极致、同时又能让你在底层玩得足够“透”的微控制器开发板,那么 Seeed Studio 的 XIAO RP2350 绝对是一个绕不开的选项。它不是那种用 Arduino 库简单调调 API…

2026/11/2 8:58:42 阅读更多 →

最新新闻

Electron桌面应用开发实战:从环境搭建到打包发布全流程

Electron桌面应用开发实战:从环境搭建到打包发布全流程

做前端这些年,我大部分时间都在跟浏览器标签页打交道,直到第一次把桌面应用跑起来,才发现原来自己一直被限制在地址栏和刷新按钮围起来的框框里。Electron这个词,最开始是在某段时间频繁出现在同事的讨论里,一个用HTML…

2026/11/2 0:25:10 阅读更多 →
滑盖智能锁T109深度解析:结构原理、安装调试与故障排查

滑盖智能锁T109深度解析:结构原理、安装调试与故障排查

简介:亚太天能T109滑盖智能锁产品说明书是一份PDF格式的官方技术文档,主要面向智能锁安装人员、终端用户及售后维护者,帮助快速掌握产品安装、配置与常见故障处理。全包仅1个PDF文件,大小4.37MB,内容结构清晰&#xff…

2026/11/2 10:46:11 阅读更多 →
PMSM弱磁控制原理与Simulink建模:高速AGV驱动系统设计指南

PMSM弱磁控制原理与Simulink建模:高速AGV驱动系统设计指南

上个月我在调试一台高速AGV的驱动系统,整车要求空载跑到8m/s,电机转速已经拉到额定点,驱动器的输出电压也顶到了母线电压极限附近。再往上踩速度指令,转速纹丝不动,三相电流反而开始震荡。那会儿我的第一反应就是&…

2026/11/2 10:47:40 阅读更多 →
C++核心知识点:从内存管理到STL的实战指南

C++核心知识点:从内存管理到STL的实战指南

C 这门语言我前前后后折腾了十几年,用它写过嵌入式驱动、做过游戏服务端,也搭过基础组件库。每次看到新人一头扎进"C 核心知识点"这个搜索词,我其实挺感慨的——这门语言的难点从来不是语法多,而是知识点之间的耦合太深…

2026/11/2 1:16:51 阅读更多 →
T109滑盖智能锁怎么装?安装调试与故障排查全攻略

T109滑盖智能锁怎么装?安装调试与故障排查全攻略

简介:亚太天能T109滑盖智能锁产品说明书以PDF格式发布,适合智能锁用户、安装人员与售后维修人员阅读。内容围绕T109系列指纹密码刷卡锁展开,先介绍前面板、后面板、锁体、机械钥匙、电池盒盖等部件名称与功能,再给出完整安装步骤&…

2026/11/2 10:46:31 阅读更多 →
LLM知识降熵:从信息垄断到理解权下放

LLM知识降熵:从信息垄断到理解权下放

你有没有过这种经历:翻开源码注释、论文摘要或者一份专业报告,每个字都认识,连在一起却像天书。想找人聊聊,身边要么没人懂,要么懂的懒得跟你解释。后来我试着把同一段内容丢给一个大语言模型,几秒钟之后&a…

2026/11/2 10:46:26 阅读更多 →

日新闻

周新闻

月新闻