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/8/2 10:29:42 阅读更多 →
嵌入式硬件适配器设计:从接口匹配到系统集成的完整实践

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

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

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

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

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

2026/8/2 10:29:42 阅读更多 →

最新新闻

解决CUDA安装后nvcc命令找不到:PATH环境变量配置详解

解决CUDA安装后nvcc命令找不到:PATH环境变量配置详解

1. 问题定位:为什么CUDA装好了,nvcc却“找不到”? 相信很多刚接触CUDA编程或者深度学习环境搭建的朋友,都遇到过这个经典的“拦路虎”:你按照官方教程或者各种博客,一步步在Linux(比如Ubuntu&am…

2026/8/2 11:11:59 阅读更多 →
数据安全法下,企业用在线压缩工具到底违不违规?

数据安全法下,企业用在线压缩工具到底违不违规?

合规问题的起点 自 2021 年《数据安全法》和《个人信息保护法》施行以来,企业文件处理的合规要求被提到前所未有的高度。一份合同、一份报表、一份客户名单,在传输、存储、压缩过程中都可能触及法律红线。 文件压缩、格式转换本质上都属于"数据处…

2026/8/2 11:11:59 阅读更多 →
2026年工程管理记录转文字工具怎么选?3个实用判断标准请参考

2026年工程管理记录转文字工具怎么选?3个实用判断标准请参考

2026年选工程管理记录转文字工具,可按适配性、结构化能力、知识转化能力3个实用标准判断,适合需要整理工程会议、培训录音的工程从业者和购买了工程管理付费内容的知识付费用户,核心依据是工程记录多有口音、专业内容需要留存转化&#xff0c…

2026/8/2 11:11:59 阅读更多 →
1.54英寸NFC供电电子纸:无源显示原理、NDEF数据写入与物联网应用实战

1.54英寸NFC供电电子纸:无源显示原理、NDEF数据写入与物联网应用实战

1. 项目缘起:为什么是1.54英寸NFC供电电子纸?最近在捣鼓一个需要超低功耗、能长期显示信息的小玩意儿,比如智能货架标签、便携式会议名牌,或者一个不需要电池的传感器数据显示屏。核心需求就三个:功耗要极低、显示要清…

2026/8/2 11:11:59 阅读更多 →
VScode+STM32CubeMX进行STM32编程准备(AI友好)

VScode+STM32CubeMX进行STM32编程准备(AI友好)

环境配置 首先我们需要下载 STM32CubeMX 和 STM32CubeCLT 并进行安装,作为项目生成器和包管理器 在浏览器中搜索 STM32CubeMX ,进入官方链接,点击获取软件 跳转后点击“ DownLoad ”进行下载 注意这里下载的是 STM32CubeMX,而不…

2026/8/2 11:11:59 阅读更多 →
免费开源的Gerber查看器gerbv:PCB设计验证的终极解决方案

免费开源的Gerber查看器gerbv:PCB设计验证的终极解决方案

免费开源的Gerber查看器gerbv:PCB设计验证的终极解决方案 【免费下载链接】gerbv Maintained fork of gerbv, carrying mostly bugfixes 项目地址: https://gitcode.com/gh_mirrors/ge/gerbv 在PCB设计的世界里,Gerber文件就像是电路板的"施…

2026/8/2 11:10:59 阅读更多 →

日新闻

最大流算法详解:从水管网络到Ford-Fulkerson与Dinic实战

最大流算法详解:从水管网络到Ford-Fulkerson与Dinic实战

1. 从水管网络到最大流:一个核心问题的诞生想象一下,你是一个城市供水系统的总工程师。你的城市有多个水源(水库),需要通过一个复杂的地下管道网络,将水输送到各个居民区。每条管道都有其最大通水能力&…

2026/8/2 0:00:38 阅读更多 →
基于Springboot的企业门户网站(源码+LW+调试文档+讲解)

基于Springboot的企业门户网站(源码+LW+调试文档+讲解)

温馨提示:本人主页置顶文章(点我)开头有 CSDN 平台官方提供的学长联系方式的名片! 温馨提示:本人主页置顶文章(点我)开头有 CSDN 平台官方提供的学长联系方式的名片! 温馨提示:本人主页置顶文章(点我)开头有 CSDN 平台…

2026/8/2 0:00:38 阅读更多 →
MATLAB xcorr函数详解:从互相关原理到四大实战应用

MATLAB xcorr函数详解:从互相关原理到四大实战应用

1. 从一次信号“找茬”说起:为什么我们需要互相关几年前,我在处理一组声学传感器数据时遇到了一个棘手的问题。我有两个麦克风记录了一段相同的音频信号,理论上它们接收到的声音波形应该非常相似,只是由于麦克风位置不同&#xff…

2026/8/2 0:00:38 阅读更多 →

周新闻

最大流算法详解:从水管网络到Ford-Fulkerson与Dinic实战

最大流算法详解:从水管网络到Ford-Fulkerson与Dinic实战

1. 从水管网络到最大流:一个核心问题的诞生想象一下,你是一个城市供水系统的总工程师。你的城市有多个水源(水库),需要通过一个复杂的地下管道网络,将水输送到各个居民区。每条管道都有其最大通水能力&…

2026/8/2 0:00:38 阅读更多 →
基于Springboot的企业门户网站(源码+LW+调试文档+讲解)

基于Springboot的企业门户网站(源码+LW+调试文档+讲解)

温馨提示:本人主页置顶文章(点我)开头有 CSDN 平台官方提供的学长联系方式的名片! 温馨提示:本人主页置顶文章(点我)开头有 CSDN 平台官方提供的学长联系方式的名片! 温馨提示:本人主页置顶文章(点我)开头有 CSDN 平台…

2026/8/2 0:00:38 阅读更多 →
MATLAB xcorr函数详解:从互相关原理到四大实战应用

MATLAB xcorr函数详解:从互相关原理到四大实战应用

1. 从一次信号“找茬”说起:为什么我们需要互相关几年前,我在处理一组声学传感器数据时遇到了一个棘手的问题。我有两个麦克风记录了一段相同的音频信号,理论上它们接收到的声音波形应该非常相似,只是由于麦克风位置不同&#xff…

2026/8/2 0:00:38 阅读更多 →

月新闻

免费解锁百度网盘SVIP加速:macOS用户必备的下载提速终极指南

免费解锁百度网盘SVIP加速:macOS用户必备的下载提速终极指南

免费解锁百度网盘SVIP加速:macOS用户必备的下载提速终极指南 【免费下载链接】BaiduNetdiskPlugin-macOS For macOS.百度网盘 破解SVIP、下载速度限制~ 项目地址: https://gitcode.com/gh_mirrors/ba/BaiduNetdiskPlugin-macOS 还在为百度网盘macOS版的龟速下…

2026/8/2 6:34:16 阅读更多 →
终极ncmdump指南:3分钟实现网易云NCM音乐解密与格式转换

终极ncmdump指南:3分钟实现网易云NCM音乐解密与格式转换

终极ncmdump指南:3分钟实现网易云NCM音乐解密与格式转换 【免费下载链接】ncmdump 项目地址: https://gitcode.com/gh_mirrors/ncmd/ncmdump 还在为网易云音乐下载的NCM格式文件无法在其他播放器播放而烦恼吗?ncmdump解密工具帮你轻松解决这个困…

2026/8/2 2:47:48 阅读更多 →
HarmonyOS 应用开发《掌上英语》第81篇: 智能体卡片:为英语学习 App 打造桌面级学习助手

HarmonyOS 应用开发《掌上英语》第81篇: 智能体卡片:为英语学习 App 打造桌面级学习助手

AgentCard 智能体卡片:为英语学习 App 打造桌面级学习助手适用平台:HarmonyOS 7.0 (API 26 Beta)一、引言 HarmonyOS 7.0(API 26 Beta)新增了 AgentCard 智能体卡片能力,这是继 HMAF(鸿蒙智能体框架&#x…

2026/8/2 0:23:22 阅读更多 →