- 博客(478)
- 收藏
- 关注
RSS订阅原创 从零实现富文本编辑器#5-编辑器选区模型的状态结构表达
本文探讨了富文本编辑器选区模型的设计实现，重点对比了Quill、Slate和Lexical三种主流编辑器的数据结构与选区表达方式。选区模型的设计直接影响编辑器变更操作的效率，并分析了不同数据结构在遍历查找和应用变更时的优劣。
2025-06-10 10:25:06
783
原创 从零实现富文本编辑器#4-浏览器选区模型的核心交互策略
本文探讨了富文本编辑器中选区模型的设计与实现，重点分析了基于浏览器原生Range和Selection对象的选区操作机制。文章指出选区模型直接决定了编辑器操作范围的表现，并通过示例展示了Quill和Slate两种编辑器在选区表达上的差异。详细解析了Range对象的属性和方法（如setStart、getBoundingClientRect等），以及如何通过Selection对象处理用户选区交互。最后介绍了利用::highlight伪元素实现文本高亮的方法，为富文本编辑器的选区功能开发提供了实践指导。
2025-05-28 10:27:00
704
原创 富文本编辑器剪贴板模块基石-序列化与反序列化
在富文本编辑器中，序列化与反序列化是非常重要的环节，其涉及到了编辑器的内容复制、粘贴、导入导出等模块。当用户在编辑器中进行复制操作时，富文本内容会被转换为标准的HTML格式，并存储在剪贴板中。而在粘贴操作中，编辑器则需要将这些HTML内容解析并转换为编辑器的私有JSON结构，以便于实现跨编辑器内容的统一管理。
2025-05-07 10:20:54
662
原创 偶然发现Git文件夹非常大，使用BGF来处理Git历史Blob文件
我们使用Git来管理项目的时候，可能会提交一些Blob的二进制文件，这些文件并不能像文本文件一样采用diff delta的形式进行版本控制。如果这些文件一直跟随master的主版本，那么就是属于有效的文件。然而很多时候这些二进制文件会被删除重建，那么由于Git的特性，这些文件会一直留在Git的历史记录中，这样会导致Git仓库变得庞大，不利于版本控制和迁移。最直观的就是clone的时候会很慢，而使用--depth=1则无法看到历史提交的代码。
2025-04-29 12:43:27
859
原创 基于 OT-JSON 与 Immer 设计低代码/富文本场景的状态管理方案
在这里我们基于Immer和OT-JSON设计了一套应用状态管理方案，通过Immer的草稿机制简化不可变数据操作，结合OT-JSON的原子化操作与协同算法，实现原子化、可协同、高扩展的应用级状态管理方案，以及按需渲染的视图性能优化方案。整体来说，这个方案比较适用于嵌套数据结构的动态组合与状态管理。在实际应用中，我们还是需要根据场景来选择合适的状态管理方案。在应用级别的场景中，例如富文本、画板、低代码中，顶层的架构设计还是非常重要的，所有的状态变更、节点类型都应该由这层架构设计扩展出来。
2025-04-23 10:13:35
751
原创 从零实现富文本编辑器#3-基于Delta的线性数据结构模型
数据结构的设计是非常重要的，对于编辑器来说，数据结构的设计直接影响着选区模型、DOM模型、状态管理等模块的设计。在这里我们聊到了很多的数据结构设计，DeltaChangeset的线性结构，Slate的嵌套结构，每种数据都有着各自的设计与考量。那么在选定好了数据结构后，就可以在此基础上实现编辑器的各个模块。我们接下来会从数据模型出发，设计选区模型的表示，然后在此基础上实现浏览器选区与编辑器选区模型的同步。通过选区模型作为操作的目标，来实现编辑器的基础操作，例如插入、删除、格式化等操作。
2025-04-22 10:41:32
856
原创 从零实现富文本编辑器#2-基于MVC模式的编辑器架构设计
在这里我们实现了简单的编辑器MVC架构示例，然后在此基础上自然而然地抽象出了编辑器的核心模块、数据模型、视图层、工具函数等，并且将其做了简单的叙述。在后续我们会描述编辑器的数据模型设计，介绍我们的Delta数据结构方法，以及在编辑器中的相关应用场景。数据结构是非常重要的设计，因为编辑器的核心操作都是基于数据模型的，若不能够理解数据结构的设计，则会导致难以理解编辑器的很多操作模型。
2025-04-15 10:24:07
1127
1
原创 深感一无所长，准备试着从零开始写个富文本编辑器
在本文我们聊了很多关于富文本编辑器基础能力的实现，特别是在DOM结构表现和数据结构之间的设计。并且在浏览器交互的方案上，我们也聊了Canvas实现方案的特点，简单总结了当前成熟产品以及开源编辑器，并且描述了相关实现的优缺点。在后边我们会基于实现基本的富文本编辑器，首先对于整体的架构设计，以及数据结构的操作做概述。然后开始分别实现具体的模块，例如输入模块、剪贴板模块、选区模块等等。
2025-04-09 10:34:01
1020
原创 基于React的虚拟滚动方案
在渲染列表时我们通常会一次性将所有列表项渲染到DOM中，在数据量大的时候这种操作会造成页面响应缓慢，因为浏览器需要处理大量的DOM元素。而此时我们通常就需要虚拟滚动来实现性能优化，当我们拥有大量数据需要在用户界面中以列表或表格的形式展示时，这种性能优化方式可以大幅改善用户体验和应用性能，那么在本文中就以固定高度和非固定高度两种场景展开虚拟滚动的实现。
2025-03-11 10:30:44
631
原创 du-磁盘占用管理
在先前发现Git管理的项目特别大，在平时开发的时候可能提交了二进制文件，但是这部分文件无法进行diff处理变更进行版本控制。因此当这类文件不断删除新增，导致整个项目文件夹越来越大。然后先前通过BGF处理了Git历史Blob文件，这个过程中发现Mac系统无法直接选中某些文件夹的硬盘总数占用，所以只能通过du命令来查看相关文件夹的大小。du命令是Disk Usage的缩写，用于估算和显示文件系统中的文件和目录的磁盘使用情况。
2025-02-16 13:13:39
482
原创 Slate文档编辑器-Node节点与Path路径映射
在这里我们主要讨论了Node节点与Path路径映射，即如何确定渲染出的节点处于文档数据定义中的位置，这是slate中实现数据变更时的重要表达，特别是在仅使用选区无法实现的复杂操作中，并且还分析了slate源码来探究了相关问题的实现。那么在后面的文章中，我们延续当前提到的表格但单元格位置的查找，来聊聊表格模块的设计及交互。
2025-01-20 10:44:00
1206
原创 Canvas简历编辑器-选中绘制与拖拽多选交互方案
在这里我们就依然在轻量级DOM的基础上，讨论了Canvas中描边与填充的绘制问题，以及的实现方式，然后我们实现了基本的选中绘制以及拖拽多选的交互设计，并且实现了Hover的效果，以及拖拽节点的移动。那么在后边我们可以聊一下fillRule规则设计、按需绘制图形节点，也可以聊到更多的交互设计，例如Resize的交互设计、参考线能力的实现、富文本的绘制方案等等。
2025-01-13 14:20:14
1055
原创 Slate文档编辑器-Decorator装饰器渲染调度
在这里我们主要讨论了slate中的decoration装饰器的实现，以及在实际使用中可能会遇到的问题，主要是在跨节点的情况下，我们需要将range拆分为多个range，然后分别进行处理，并且还分析了源码来探究了相关问题的实现。那么在后边的文章中我们就主要聊一聊在slate中Path的表达，以及在React中是如何控制其内容表达与正确维护Path路径与Element内容渲染的方案。
2024-12-30 10:52:20
1034
原创 Slate文档编辑器-TS类型扩展与节点类型检查
在这里我们更专注于文档编辑器的数据结构设计，聊聊基于slate实现的文档编辑器类型系统。在slate中还有很多额外的概念和操作需要关注，例如RangeOperationEditorElementPath等，那么在后边的文章中我们就主要聊一聊在slate中Path的表达，以及在React中是如何控制其内容表达与正确维护Path路径与Element内容渲染的，并且我们还可以聊一聊表格模块的设计与实现。
2024-12-23 10:23:24
1197
原创 Slate文档编辑器-WrapNode数据结构与操作变换
在这里我们聊到了WrapNode数据结构与操作变换，主要是对于嵌套类型的数据结构需要关注的内容，而实际上节点的类型还可以分为很多种，我们在大范围上可以有BlockNodeTextNode，在BlockNode中我们又可以划分出BaseNodeWrapNodePairNodeVoidNode等，因此文中叙述的内容还是属于比较基本的，在slate中还有很多额外的概念和操作需要关注，例如RangeOperationEditorElementPath等。那么在后边的文章中我们就主要聊一聊在slate中Path。
2024-11-18 10:31:12
668
1
原创 服务端SSE数据代理与基于fetch的EventSource实现
是一种由服务器单向推送实时更新到客户端的方案，基本原理是客户端通过HTTP请求打开与服务端的持久连接，服务端可以通过该连接连续发送事件数据。SSE适用于需要持续更新数据的应用，如实时通知、消息推送和动态内容更新，相比于WebSocket的数据通信方案更加轻量，SSE更易于实现且更适合简单的单向数据流场景。
2024-11-12 10:19:18
983
原创 初探富文本之搜索替换算法
在我们的在线文档系统中，除了基础的富文本编辑能力外，搜索替换的算法同样也是重要的功能实现。纯文本搜索替换算法相对来说是比较容易实现的，而在富文本的场景中，由于存在图文混排、嵌入模块如Mention等，实现这一功能则相对要复杂得不少。那么本文则以Quill实现的富文本编辑器为基础，通过设计索引查找和图层渲染的方式来实现搜索替换。
2024-11-04 09:43:26
506
原创 Canvas简历编辑器-选中绘制与拖拽多选交互设计
在这里我们就依然在轻量级DOM的基础上，讨论了Canvas中描边与填充的绘制问题，以及的实现方式，然后我们实现了基本的选中绘制以及拖拽多选的交互设计，并且实现了Hover的效果，以及拖拽节点的移动。那么在后边我们可以聊一下fillRule规则设计、按需绘制图形节点，也可以聊到更多的交互设计，例如Resize的交互设计、参考线能力的实现、富文本的绘制方案等等。
2024-10-28 09:41:11
625
原创 Canvas简历编辑器-Monorepo+Rspack工程实践
在这里我们聊了为什么要用Monorepo以及简单聊了一下的优势，然后解决了在子项目开发中会遇到的TS编译、项目编译的两个实际问题，分别在MonorepoRspackWebpack项目中相关的部分实践了一下，最后还简单聊了一下利用直接在Git Pages部署在线DEMO。那么再往后边的文章中，我们就需要聊一聊如何实现 层级渲染与事件管理 的能力设计。
2024-09-18 10:37:56
1459
原创 基于Service Worker实现WebRTC局域网大文件传输能力
是一种驻留在用户浏览器后台的脚本，能够拦截和处理网络请求，从而实现丰富的离线体验、缓存管理和网络效率优化。请求拦截是其关键功能之一，通过监听fetch事件，可以捕获所有向网络发出的请求，并有选择地处理这些请求，例如从缓存中读取响应，或者对请求进行修改和重定向，进而实现可靠的离线浏览和更快速的内容加载。
2024-09-09 09:16:44
2024
原创 Canvas简历编辑器-图形绘制与状态管理(轻量级DOM)
在这里我们聊了聊如何抽象基本的图形绘制以及状态的管理，因为我们的需求在这里所以我们的图形绘制能力会设计的比较简单，而状态管理则是迭代了三个方案才确定通过轻量DOM的方式来实现，那么再往后，我们就需要聊一聊如何实现 层级渲染与事件管理 的能力设计。
2024-08-06 10:32:05
1180
原创 神秘 Arco 样式出现，祭出 Webpack 解决预期外的引用问题
Webpack是现代化的静态资源模块化管理和打包工具，其能够通过插件配置处理和打包多种文件格式，生成优化后的静态资源，核心原理是将各种资源文件视为模块，通过配置文件定义模块间的依赖关系和处理规则，从而实现模块化开发。Webpack提供了强大的插件和加载器系统，支持了代码分割、热加载和代码压缩等高效构建能力，显著提升了开发效率和性能。是Webpack中用于解析模块路径的配置项，其负责告诉Webpack如何查找和确定模块的位置，核心功能是通过配置来定义模块的查找机制和优先级，从而确保Webpack。
2024-08-06 10:21:49
1167
原创 安装量终于破千了！聊聊浏览器扩展开发的相关问题与解决方案
浏览器扩展的开发还是比较复杂的一件事，特别是在需要兼容v2和v3的情况下，很多设计都需要思考是否能够正常在v3上实现，在v3的浏览器扩展上失去了很多灵活性，但是相对也获取了一定的安全性。不过浏览器扩展本质上的权限还是相当高的，例如即使是v3我们仍然可以在Chrome上使用来实现很多事情，扩展能做的东西实在是太多了，如果不了解或者不开源的话根本不敢安装，因为扩展权限太高可能会造成很严重的例如用户信息泄漏等问题，即使是比如像Firefox那样必须要上传源代码的方式来加强审核，也很难杜绝所有的隐患。
2024-07-22 09:11:17
902
原创 基于Chrome扩展的浏览器可信事件与网页离线PDF导出
Chrome扩展是一种可以在浏览器中添加新功能和修改浏览器行为的软件程序，我们可以基于Manifest规范的API实现对于浏览器和Web页面在一定程度上的修改，例如广告拦截、代理控制等。则是Chrome浏览器提供的一套与浏览器进行交互的API，我们可以基于DevTools协议控制Chromium内核的浏览器进行各种操作，例如操作页面元素、模拟用户交互等。
2024-07-02 09:10:13
1466
原创 基于React的SSG静态站点渲染方案
静态站点生成是一种在构建时生成静态HTML等文件资源的方法，其可以完全不需要服务端的运行，通过预先生成静态文件，实现快速的内容加载和高度的安全性。由于其生成的是纯静态资源，便可以利用CDN等方案以更低的成本和更高的效率来构建和发布网站，在博客、知识库、API文档等场景有着广泛应用。
2024-06-04 09:00:24
1161
原创 初探富文本之基于虚拟滚动的大型文档性能优化方案
虚拟滚动是一种优化长列表性能的技术，其通过按需渲染列表项来提高浏览器运行效率。具体来说，虚拟滚动只渲染用户浏览器视口部分的文档数据，而不是整个文档结构，其核心实现根据可见区域高度和容器的滚动位置计算出需要渲染的列表项，同时不渲染额外的视图内容。虚拟滚动的优势在于可以大大减少DOM操作，从而降低渲染时间和内存占用，解决页面加载慢、卡顿等问题，改善用户体验。
2024-06-03 08:43:09
851
1
原创 从油猴脚本管理器的角度审视Chrome扩展
最终在这里我们可能已经明确了浏览器扩展的一些非常Hack能力的实现，同时可能也会发现浏览器扩展的权限是真的非常高，在V2版本中甚至连HTTP Only的Cookie都可以拿到，在V3中限制就多了起来，但是整体的权限还是非常高的，所以在选择浏览器扩展时还是需要谨慎，要不就选择用户比较多的，要不就选择开源的。不过之前类似EDGE扩展的事件还是不容易避免，简单来说就是EDGE。
2024-05-13 08:51:39
1378
原创 Canvas简历编辑器-我的剪贴板里究竟有什么数据
本文我们介绍总结了应该如何操作剪贴板，也就是我们在浏览器的复制粘贴行为，并且在此基础上聊到了在Canvas图形编辑器中的焦点问题以及如何实现复制粘贴行为，虽然暂时不涉及到Canvas本身，但是这都是作为编辑器本身的基础能力，也是通用的能力可以学习。针对于这个编辑器我们可以介绍的能力还有很多，整体来看会涉及到数据结构、History模块、复制粘贴模块、画布分层、事件管理、无限画布、按需绘制、性能优化、焦点控制、参考线、富文本、快捷键、层级控制、渲染顺序、事件模拟、PDF。
2024-05-07 10:55:04
1151
原创 Canvas图形编辑器-数据结构与History(undo/redo)
本文我们介绍总结了我们的图形编辑器中数据结构的设计以及History模块的实现，虽然暂时不涉及到Canvas本身，但是这都是作为编辑器本身的基础能力，也是通用的能力可以学习。后边我们可以介绍的能力还有很多，例如复制粘贴模块、画布分层、时间管理、无限画布、按需绘制、性能优化、焦点控制、参考线、富文本、快捷键、层级控制、渲染顺序、事件模拟、PDF排版等等，整体来说还是比较有意思的，欢迎关注我并留意后续的文章。
2024-04-15 10:30:41
1131
原创 基于Canvas实现的简历编辑器
这次对于Canvas的体验让我感觉还是不错的，后边我也会写一些在实现的时候碰到的问题以及如何解决问题的文章，不过我目前的主业还是还是写富文本编辑器，富文本编辑器也是天坑中的一员，后边也可能会先写编辑器相关的文章。
2024-04-15 10:28:43
1674
原创 基于OT与CRDT协同算法的文档划词评论能力实现
当我们实现在线文档平台时，划词评论的功能是非常必要的，特别是在重文档管理流程的在线文档产品中，文档反馈是非常重要的一环，这样可以帮助文档维护者提高文档质量。而即使是单纯的将划词评论作为讨论区，也是非常有用的，尤其是在文档并不那么完善的情况下，对接产品系统的时候可以得到文档之外的输入。那么本文将通过引入协同算法来解决冲突，从而实现在线文档的划词评论能力。我们即将要聊的OT与CRDT。
2024-04-10 09:14:11
969
原创 深入在线文档系统的 MarkDown/Word/PDF 导出能力设计
当我们实现在线文档的系统时，通常需要考虑到文档的导出能力，特别是对于私有化部署的复杂ToB产品来说，文档的私有化版本交付能力就显得非常重要，此外成熟的在线文档系统还有很多复杂的场景，都需要我们提供文档导出的能力。那么本文就以Quill富文本编辑器引擎为基础，探讨文档导出为MarkDownWordPDF插件化设计实现。文章中我们即将要聊到的每个转换器设计都有相关示例，在实现DEMO的过程中也是踩了很多坑，给予的示例可以完成纯前端的数据转换，也可以通过Node来实现，还是比较有参考价值的。Markdown。
2024-03-27 08:58:47
1872
原创 毕业半年多了，回顾从大学到现在搞过的很有意思的开源项目
感觉还是做了一些比较有意思的项目的，我个人觉得如果是搞技术的话，保持对技术的好奇心是一件很重要的事，能用技术来解决平时遇到的问题也是非常重要的一点，昨天听群友说他做了个项目用算法来下棋，面试官问他这个项目有什么用，我觉得这就是个很有意思的项目，过年回家的时候跟大爷下棋能跟大爷下的有来有回可不是有用吗，提供情绪价值也是很重要的。再说回来我做的这些项目，最开始我的目的就非常简单，我觉得这件事有意思我就去做了，并且在做的过程中不断解决了很多问题，并且也不断提升了技术水平，还能写很多博客，何乐而不为。
2024-03-11 09:00:00
871
1
原创 初探富文本之富文本diff算法与文档对比视图的实现
当我们实现在线文档的系统时，通常需要考虑到文档的版本控制与审核能力，并且这是这是整个文档管理流程中的重要环节，那么在这个环节中通常就需要文档的diff能力，这样我们就可以知道文档的变更情况，例如文档草稿与线上文档的差异、私有化版本A与版本B之间的差异等等，本文就以Quill富文本编辑器引擎为基础，探讨文档diff算法的实现。
2024-02-21 09:00:08
782
原创 仿照AirDrop(隔空投送)优雅地在局域网中传输文件
webrtc是一项实时通讯技术，允许网络应用或者站点，在不借助中间媒介的情况下，建立浏览器之间点对点的连接，实现视频流、音频流、文件等等任意数据的传输，WebRTC包含的这些标准使用户在无需安装任何插件或者第三方的软件的情况下，可以创建点对点的数据分享和电话会议等。
2024-01-01 10:15:47
1574
原创 初探webpack之单应用多端构建
在现代化前端开发中，我们可以借助构建工具来简化很多工作，单应用多端构建就是其中应用比较广泛的方案，webpack中提供了loader与plugin来给予开发者非常大的操作空间来操作构建过程，通过操作中间产物我们可以非常方便地实现多端构建，当然这是一种思想而不是深度绑定在webpack中的方法，我们也可以借助其他的构建工具来实现，比如rollupviterspack等等。
2023-12-02 12:15:42
1174
原创 从零实现的浏览器Web脚本
在前文中我们探讨了很多关于富文本引擎和协同的能力，在本文中我们更偏向具体的应用组件实现。在一些场景中比如组件库的文档编写时，我们希望能够有实时预览的能力，也就是用户可以在文档中直接编写代码，然后在页面中实时预览，这样可以让用户更加直观的了解组件的使用方式，这也是很多组件库文档中都会有的一个功能。那么我们在本文就侧重于React组件的实时预览，来探讨相关能力的实现。文中涉及的相关代码都在，在富文本文档中的实现效果可以参考。
2023-11-03 20:25:19
807
原创 初探富文本之React实时预览
在前文中我们探讨了很多关于富文本引擎和协同的能力，在本文中我们更偏向具体的应用组件实现。在一些场景中比如组件库的文档编写时，我们希望能够有实时预览的能力，也就是用户可以在文档中直接编写代码，然后在页面中实时预览，这样可以让用户更加直观的了解组件的使用方式，这也是很多组件库文档中都会有的一个功能。那么我们在本文就侧重于React组件的实时预览，来探讨相关能力的实现。文中涉及的相关代码都在，在富文本文档中的实现效果可以参考。
2023-10-15 13:27:56
1067
原创 ReactPortals传送门
提供了一种将子节点渲染到父组件以外的DOM节点的解决方案，即允许将JSX作为children渲染至DOM的不同部分，最常见用例是子组件需要从视觉上脱离父容器，例如对话框、浮动工具栏、提示信息等。
2023-09-29 10:13:57
883
原创 SVG与foreignObject元素
可缩放矢量图形基于标记语言，用于描述二维的矢量图形。作为一个基于文本的开放网络标准，能够优雅而简洁地渲染不同大小的图形，并和、、等其他网络标准无缝衔接。图像及其相关行为被定义于文本文件之中，这意味着可以对其进行搜索、索引、编写脚本以及压缩，此外这也意味着可以使用任何文本编辑器和绘图软件来创建和编辑。是可缩放矢量图形的缩写，其是一种用于描述二维矢量图形的可扩展标记语言标准，与基于像素的图像格式(如和)不同，使用数学方程和几何描述来定义图像，这使得其能够无损地缩放和调整大小，而不会失真或模糊。图像由基本形状(如
2023-08-11 21:33:04
2105
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人