摘要: 先前我们总结了浏览器选区模型的交互策略,并且实现了基本的选区操作,还调研了自绘选区的实现。那么相对的,我们还需要设计编辑器的选区表达,也可以称为模型选区,编辑器中应用变更时的操作范围,就是以模型选区为基准来实现的。在这里我们就以编辑器状态为基础,来设计模型选区的结构表达。 开源地址: https:/ 阅读全文
posted @ 2025-06-10 10:23 WindRunnerMax 阅读(186) 评论(0) 推荐(0)
摘要: 先前我们提到了,数据模型的设计是编辑器的基础模块,其直接影响了选区模块的表示。选区模块的设计同样是编辑器的基础部分,编辑器应用变更时操作范围的表达,就需要基于选区模型来实现,也就是说选区代表的意义是编辑器需要感知在什么范围内执行变更命令。 开源地址: https://github.com/WindR 阅读全文
posted @ 2025-05-28 10:25 WindRunnerMax 阅读(233) 评论(1) 推荐(1)
摘要: 在富文本编辑器中,序列化与反序列化是非常重要的环节,其涉及到了编辑器的内容复制、粘贴、导入导出等模块。当用户在编辑器中进行复制操作时,富文本内容会被转换为标准的HTML格式,并存储在剪贴板中。而在粘贴操作中,编辑器则需要将这些HTML内容解析并转换为编辑器的私有JSON结构,以便于实现跨编辑器内容的 阅读全文
posted @ 2025-05-07 10:18 WindRunnerMax 阅读(468) 评论(1) 推荐(2)
摘要: 我们使用Git来管理项目的时候,可能会提交一些Blob的二进制文件,这些文件并不能像文本文件一样采用diff delta的形式进行版本控制。如果这些文件一直跟随master的主版本,那么就是属于有效的文件。 然而很多时候这些二进制文件会被删除重建,那么由于Git的特性,这些文件会一直留在Git的历史 阅读全文
posted @ 2025-04-29 12:42 WindRunnerMax 阅读(496) 评论(4) 推荐(1)
摘要: 在复杂应用中,例如低代码、富文本编辑器的场景下,数据结构的设计就显得非常重要,这种情况下的状态管理并非是redux、mobx等通用解决方案,而是需要针对具体场景进行定制化设计,那么在这里我们来尝试基于Immer以及OT-JSON实现原子化、可协同、高扩展的应用级状态管理方案。 描述 将Immer与O 阅读全文
posted @ 2025-04-23 10:12 WindRunnerMax 阅读(5600) 评论(0) 推荐(0)
摘要: 数据模型的设计是编辑器的核心基础,其直接影响了选区模型、DOM模型、状态管理等模块的设计。例如在quill中的选区模型是index + len的表达,而slate中则是anchor + focus的表达,这些都是基于数据模型的设计而来的。因此我们从零实现的富文本编辑器就需要从数据模型的设计开始,之后 阅读全文
posted @ 2025-04-22 10:42 WindRunnerMax 阅读(923) 评论(2) 推荐(9)
摘要: 在先前的规划中我们是需要实现MVC架构的编辑器,将应用程序分为控制器、模型、视图三个核心组件,通过控制器执行命令时会修改当前的数据模型,进而表现到视图的渲染上。简单来说就是构建一个描述文档结构与内容的数据模型,并且使用自定义的execCommand对数据描述模型进行修改。以此实现的L1级富文本编辑器 阅读全文
posted @ 2025-04-15 10:22 WindRunnerMax 阅读(1579) 评论(1) 推荐(2)
摘要: 富文本编辑器是允许用户在输入和编辑文本内容时,可以应用不同的格式、样式等功能,例如图文混排等,具有所见即所得的能力。与简单的纯文本编辑组件<input>等不同,富文本编辑器提供了更多的功能和灵活性,让用户可以创建更丰富和结构化的内容。现代的富文本编辑器也已经不仅限于文字和图片,还包括视频、表格、代码 阅读全文
posted @ 2025-04-09 10:33 WindRunnerMax 阅读(1590) 评论(7) 推荐(12)
摘要: 基于React的虚拟滚动方案 在渲染列表时我们通常会一次性将所有列表项渲染到DOM中,在数据量大的时候这种操作会造成页面响应缓慢,因为浏览器需要处理大量的DOM元素。而此时我们通常就需要虚拟滚动来实现性能优化,当我们拥有大量数据需要在用户界面中以列表或表格的形式展示时,这种性能优化方式可以大幅改善用 阅读全文
posted @ 2025-03-11 10:29 WindRunnerMax 阅读(327) 评论(0) 推荐(1)
摘要: du-磁盘占用管理 在先前发现Git管理的项目特别大,在平时开发的时候可能提交了二进制文件,但是这部分文件无法进行diff处理变更进行版本控制。因此当这类文件不断删除新增,导致整个项目文件夹越来越大。 然后先前通过BGF处理了Git历史Blob文件,这个过程中发现Mac系统无法直接选中某些文件夹的硬 阅读全文
posted @ 2025-02-16 13:14 WindRunnerMax 阅读(30) 评论(0) 推荐(0)