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

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

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

2026/10/9 4:50:06 阅读更多 →
XIAO RP2350嵌入式开发实战:C/C++ SDK环境搭建与双核编程

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

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

2026/10/8 9:21:02 阅读更多 →

最新新闻

CMake `CheckVariableExists` 模块深度解析:链接期检测 C 变量是否存在

CMake `CheckVariableExists` 模块深度解析:链接期检测 C 变量是否存在

构建工具开发工具CLI 【免费下载链接】CMake Mirror of CMake upstream repository 项目地址: https://gitcode.com/gh_mirrors/cm/CMake 点击查看 免费下载 导读 CheckVariableExists 是 CMake 内置的一个轻量级检查模块,用于在配置阶段探测链接器能否…

2026/10/9 4:50:04 阅读更多 →
opencode工具层与服务面设计:从能跑到好用的工程实践

opencode工具层与服务面设计:从能跑到好用的工程实践

1. 从“能跑”到“好用”:工具层设计的取舍逻辑上篇聊完了核心架构和会话管理,这篇重点落在工具、服务面、外壳和实战集成上。很多人第一次接触 opencode 这类终端 AI 编程助手时,注意力都放在“它能不能帮我写代码”上,但真正决定…

2026/10/9 4:50:04 阅读更多 →
Loop:8 个方向管好 Mac 窗口的开源工具

Loop:8 个方向管好 Mac 窗口的开源工具

Loop:8 个方向管好 Mac 窗口的开源工具 【免费下载链接】Loop Window management made elegant. 项目地址: https://gitcode.com/GitHub_Trending/lo/Loop 如果你的 Mac 屏幕上整天摆满窗口,Loop 这款开源的 Mac 窗口管理工具可以帮你省掉大半拖拽…

2026/10/9 4:50:04 阅读更多 →
huashu-art-motion y5 动态文字排版语法:让字踩在 120BPM 节拍网格上砸进来的代码化 Kinetic Type

huashu-art-motion y5 动态文字排版语法:让字踩在 120BPM 节拍网格上砸进来的代码化 Kinetic Type

【免费下载链接】huashu-art-motion 艺术动画skill:35种艺术风格、9种解说语法,用代码让画动起来。 项目地址: https://gitcode.com/gh_mirrors/hu/huashu-art-motion 点击查看 免费下载 本篇基于 huashu-art-motion 仓库的语法卡 y5_kineti…

2026/10/9 4:50:04 阅读更多 →
GOR流量复制工具:HTTP真实流量回放与故障定位实战

GOR流量复制工具:HTTP真实流量回放与故障定位实战

1. 项目概述:为什么“gor工具”成了生产环境里那个让人又爱又恨的流量操盘手你有没有经历过这样的凌晨三点:线上订单接口突然响应变慢,错误率从0.02%跳到3%,监控图表像心电图一样疯狂抖动。运维同事在群里甩出一串日志&#xff0c…

2026/10/9 4:50:04 阅读更多 →
oneTBB concurrent_hash_map 非成员二元比较运算符(operator== / operator!=)详解

oneTBB concurrent_hash_map 非成员二元比较运算符(operator== / operator!=)详解

并发编程高性能计算 【免费下载链接】oneTBB oneAPI Threading Building Blocks (oneTBB) 项目地址: https://gitcode.com/gh_mirrors/on/oneTBB 点击查看 免费下载 导读 本文聚焦 oneAPI Threading Building Blocks(oneTBB)中 oneapi::tbb…

2026/10/9 4:49:04 阅读更多 →

日新闻

Java时间API实战:LocalDate、Date与ZonedDateTime的转换与避坑指南

Java时间API实战:LocalDate、Date与ZonedDateTime的转换与避坑指南

Java时间API这个话题,隔三差五就会在群里被翻出来讨论一次。上周还有个同事线上处理一个订单超时问题,排查到最后发现是ZonedDateTime序列化后时区丢了,用户在下单当天晚上看到的时间整整差了8个小时。这类问题几乎每个做Java开发的人都遇到过…

2026/10/9 0:00:49 阅读更多 →
EasyTier实践:从NAT穿透到子网代理的异地组网部署与排错

EasyTier实践:从NAT穿透到子网代理的异地组网部署与排错

前几个月我手头有好几台机器需要互相访问:办公室台式机、家里 NAS、还有一台云主机。如果只是偶尔传个文件倒还好,问题是工作场景经常要在几处环境之间来回切换,每次都先登录跳板机再层层代理,实在折腾。我先后试过端口映射、自建…

2026/10/9 0:00:49 阅读更多 →
AI Agent工程实战:从七要素到七个决策点的系统设计指南

AI Agent工程实战:从七要素到七个决策点的系统设计指南

AI Agent 这个词在过去一年里被反复提及,但真正动手搭过一套能跑起来的 Agent 系统的人都知道,从"知道它是什么"到"让它稳定干活"之间隔着一整套工程决策。我前后参与过几个 Agent 项目的落地,从最初用现成框架拼装&…

2026/10/9 0:01:50 阅读更多 →

周新闻

KT148A语音芯片外挂8002D功放的工程实践指南

KT148A语音芯片外挂8002D功放的工程实践指南

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/8 15:26:32 阅读更多 →
LLC谐振变换器增益公式推导:从FHA等效到完整归一化表达式

LLC谐振变换器增益公式推导:从FHA等效到完整归一化表达式

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/8 15:26:40 阅读更多 →
ARM架构深度解析:从RISC设计理念到交叉编译实战

ARM架构深度解析:从RISC设计理念到交叉编译实战

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/8 10:10:36 阅读更多 →

月新闻

我发现了一个新思路:用 Remotion + Claude Code 像写代码一样自动化生成短视频

我发现了一个新思路:用 Remotion + Claude Code 像写代码一样自动化生成短视频

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/8 21:13:17 阅读更多 →
Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式:TaoToken 统一 Key 配置与验证

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式:TaoToken 统一 Key 配置与验证

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/8 15:26:17 阅读更多 →
黑夜航拍船只数据集训练YOLOV5模型全流程解析

黑夜航拍船只数据集训练YOLOV5模型全流程解析

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/7 13:34:55 阅读更多 →