乐胖代购免代理版

从零实现富文本编辑器#3-基于Delta的线性数据结构模型

数据模型的设计是编辑器的核心基础，其直接影响了选区模型、DOM模型、状态管理等模块的设计。例如在quill中的选区模型是index + l

数据结构

属性值

数据

原创 3天前 38 阅读

基于 OT-JSON 与 Immer 设计低代码/富文本场景的状态管理方案

在复杂应用中，例如低代码、富文本编辑器的场景下，数据结构的设计就显得非常重要，这种情况下的状态管理并非是redux、mobx等通用解决方

JSON

json

数据结构

原创 3天前 47 阅读

从零实现富文本编辑器#2-基于MVC模式的编辑器架构设计

在先前的规划中我们是需要实现MVC架构的编辑器，将应用程序分为控制器、模型、视图三个核心组件，通过控制器

数据模型

数据

图层

原创 9天前 0 阅读

Slate文档编辑器-Node节点与Path路径映射

Slate文档编辑器-Node节点与Path路径映射在之前我们聊到了slate中的Decorator装饰器实现，装饰器可以为我们方便地在

数据

github

文档编辑

原创 1月前 11 阅读

Canvas简历编辑器-选中绘制与拖拽多选交互方案

Canvas简历编辑器-选中绘制与拖拽多选交互方案在之前我们聊了聊如何基于Canvas与基本事件组合实现了轻量级DOM，并且在此基础上实现了如何进行管理事件以及多层级渲染的能力设计。那么此时我们就依然在轻量级DOM的基础上，关注于实现选中绘制与拖拽多选交互设计。在线编辑: https://windrunnermax.github.io/CanvasEditor 开源地址: https://gith

拖拽

ide

Math

原创 2月前 67 阅读

Slate文档编辑器-Decorator装饰器渲染调度

Slate文档编辑器-Decorator装饰器渲染调度在之前我们聊到了基于文档编辑器的数据结构设计，聊了聊基于slate实现的文

文档编辑

github

数据结构

原创 2月前 9 阅读

Slate文档编辑器-TS类型扩展与节点类型检查

Slate文档

文档编辑

Text

数据结构

原创 2月前 56 阅读

Slate文档编辑器-WrapNode数据结构与操作变换

Slate文档编辑器-WrapNode数据结构与操作变换在之前我们聊到了一些关于slate富文本引擎的基本概念，并且对基于slate实现文档编辑器的一些插件化能力设计、类型拓展、具体方案等作了探讨，那么接下来我们更专注于文档编辑器的细节，由浅入深聊聊文档编辑器的相关能力设计。在线编辑: http

数据结构

嵌套

文档编辑

原创 4月前 30 阅读

初探富文本之搜索替换算法

初探富文本之搜索替换算法在我们的在线文档系统中，除了基础的富文本编辑能力外，搜索替换的算法同样也是重要的功能

搜索

数据结构

富文本

原创 4月前 69 阅读

Canvas简历编辑器-层级渲染与事件管理能力设计

Canvas简历编辑器-选中绘制与拖拽多选交互设计在之前我们聊了聊如何基于Canvas与基本事件组合实现了轻量级DOM，并且在

拖拽

ide

Math

原创 4月前 65 阅读

Canvas简历编辑器-Monorepo+Rspack工程实践

Canvas简历编辑器-Monorepo+Rspack工程实践在之前我们围绕Canvas聊了很多代码设计层面的东西，在这里我们聊一下工程实践。在之前的文中我也提到过，因为是本着学习的态度以及对技术的好奇心来做的，所以除了一些工具类的库例如 ArcoDesign、ResizeObserve、Jest

json

数据结构

github

原创 6月前 130 阅读

基于Service Worker实现WebRTC局域网大文件传输能力

基于Service Worker实现WebRTC局域网大文件传输能力 Service Worker是一种驻留在用户浏览器后台的脚本，能够拦截和处理

数据

API

文件传输

原创 6月前 240 阅读

Canvas简历编辑器-图形绘制与状态管理(轻量级DOM)

Canvas简历编辑器-图形绘制与状态管理(轻量级DOM) 在前边我们聊了数据结构的设计和剪贴板的数据操作，那

图形绘制

数据结构

不执行

原创 7月前 46 阅读

安装量终于破千了！聊聊浏览器扩展开发的相关问题与解决方案

#endif

预处理

嵌套

原创 8月前 106 阅读

基于Chrome扩展的浏览器可信事件与网页离线PDF导出

基于Chrome扩展的浏览器可信事件与网页离线PDF导出 Chrome扩展是一种可以在浏览器中添加新功能和修改浏览器行为的软件程序

Chrome

剪贴板

API

原创 8月前 115 阅读

初探富文本之基于虚拟滚动的大型文档性能优化方案

初探富文本之基于虚拟滚动的大型文档性能优化方案虚拟滚动是一种优化长列表性能的技术，其通过按需渲染列表项来提高浏览器运行效率。

文档编辑

代码块

嵌套

原创 9月前 25 阅读

基于React的SSG静态站点渲染方案

基于React的SSG静态站点渲染方案静态站点生成SSG - Static Site Generation是一种在构建时生成静态HTML等文件资源的方法，其可以完全

HTML

客户端

服务端

原创 9月前 14 阅读

Canvas简历编辑器-我的剪贴板里究竟有什么数据

Canvas图形编辑器-我的剪贴板里究竟有什么数据在这里我们先来聊聊我们究竟应该如何操作剪贴板，也就是我们在浏览器的复制

剪贴板

html

数据

原创 10月前 22 阅读

社区老给我推Canvas，于是我也学习Canvas做了个简历编辑器

社区老给我推Canvas，于是我也学习Canvas做了个

数据结构

子树

模版

原创 2024-04-23 09:17:09 39 阅读

Canvas图形编辑器-数据结构与History(undo/redo)

Canvas图形编辑器-数据结构与History(undo/redo)这是作为社区老给我推Canvas，于是我也学习Canvas做了个简历编辑器的后续内容，主要是介绍了对数据结构的设计以及History能力的实现。在线编辑: https://windrunnermax.github.io/CanvasEditor 开源地址: https://github.com/WindrunnerMax/C

数据结构

数据

富文本

原创 2024-04-23 09:16:46 20 阅读

基于OT与CRDT协同算法的文档划词评论能力实现

基于OT与CRDT协同算法的文档划词评论能力实现当我们实现在线文档平台时，划词评论的功能是非常必要的，特别是在重文档管理流程的在

图层

富文本

数据结构

原创 2024-04-15 10:28:53 42 阅读

深入在线文档系统的 MarkDown/Word/PDF 导出能力设计

深入在线文档系统的 MarkDown/Word/PDF 导出能力设计当我们实现在线文档的系统时，通常需要考虑到文档的导

数据结构

Line

数据转换

原创 2024-03-31 13:31:57 80 阅读

初探富文本之文档diff算法

初探富文本之文档diff算法当我们实现在线文档的系统时，通常需要考虑到文档的版本控制与审核能力，并且这是这是整个文档管理流

数据结构

迭代

富文本

原创 2024-02-28 11:48:56 70 阅读

仿照AirDrop(隔空投送)优雅地在局域网中传输文件

基于WebRTC的局域网文件传输在前一段时间，我想在手机上向电脑发送文件，因为要发送的文件比较多，所以我想直接通过USB连到电脑上传输，等我将手机连到电脑上之后，我发现手机竟然无法被电脑识别，能够充电但是并不能传文件，因为我的电脑是Mac而手机是Android，所以无法识别设备这件事就变得合理了起来。那么接着我想用WeChat去传文件，但是一想到传文件之后我还需要手动将文件删掉否则会占用我两份手机

服务器

信令

客户端

原创 2024-01-16 17:01:47 86 阅读

初探webpack之单应用多端构建

初探webpack之单应用多端构建在现代化前端开发中，我们可以借助构建工具来简化很多工作，单应用多端构建就是其中应用比

环境变量

JSON

构建工具

原创 2023-12-12 14:25:40 82 阅读

从零实现的浏览器Web脚本

从零实现的浏览器Web脚本在之前我们介绍了从零实现Chrome扩展，而实际上浏览器级别的扩展整体架构非常复杂，尽管

window对象

API

Web

原创 2023-11-28 13:43:42 42 阅读

从零实现的Chrome扩展

# 从零实现的Chrome扩展 `Chrome`扩展是一种可以在`Chrome`浏览器中添加新功能和修改浏

Chrome

json

ico

原创 2023-07-23 00:46:59 72 阅读

初探富文本之CRDT协同算法

初探富文本之CRDT协同算法 CRDT的英文全称是Conflict-free Replicated Data Type，最初

数据

分布式系统

客户端

原创 2023-07-14 16:47:16 96 阅读

初探富文本之OT协同实例

初探富文本之OT协同实例在前边初探富文本之OT协同算法一文中我们探讨了为什么需要协

json

客户端

服务端

原创 2023-07-14 14:17:14 77 阅读

基于drawio构建流程图编辑器

# 基于drawio构建流程图编辑器 `drawio`是一款非常强大的开源在线的流程图编辑器，

加载

Graph

流程图

原创 2023-07-02 08:02:33 256 阅读

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

51CTO博客

WindrunnerMax

从零实现富文本编辑器#3-基于Delta的线性数据结构模型

基于 OT-JSON 与 Immer 设计低代码/富文本场景的状态管理方案

从零实现富文本编辑器#2-基于MVC模式的编辑器架构设计

Slate文档编辑器-Node节点与Path路径映射

Canvas简历编辑器-选中绘制与拖拽多选交互方案

Slate文档编辑器-Decorator装饰器渲染调度

Slate文档编辑器-TS类型扩展与节点类型检查

Slate文档编辑器-WrapNode数据结构与操作变换

初探富文本之搜索替换算法

Canvas简历编辑器-层级渲染与事件管理能力设计

Canvas简历编辑器-Monorepo+Rspack工程实践

基于Service Worker实现WebRTC局域网大文件传输能力

Canvas简历编辑器-图形绘制与状态管理(轻量级DOM)

安装量终于破千了！聊聊浏览器扩展开发的相关问题与解决方案

基于Chrome扩展的浏览器可信事件与网页离线PDF导出

初探富文本之基于虚拟滚动的大型文档性能优化方案

基于React的SSG静态站点渲染方案

Canvas简历编辑器-我的剪贴板里究竟有什么数据

社区老给我推Canvas，于是我也学习Canvas做了个简历编辑器

Canvas图形编辑器-数据结构与History(undo/redo)

基于OT与CRDT协同算法的文档划词评论能力实现

深入在线文档系统的 MarkDown/Word/PDF 导出能力设计

初探富文本之文档diff算法

仿照AirDrop(隔空投送)优雅地在局域网中传输文件

初探webpack之单应用多端构建

从零实现的浏览器Web脚本

从零实现的Chrome扩展

初探富文本之CRDT协同算法

初探富文本之OT协同实例

基于drawio构建流程图编辑器

欢迎