- 博客(468)
- 收藏
- 关注
RSS订阅原创 Slate文档编辑器-Node节点与Path路径映射
在这里我们主要讨论了Node节点与Path路径映射，即如何确定渲染出的节点处于文档数据定义中的位置，这是slate中实现数据变更时的重要表达，特别是在仅使用选区无法实现的复杂操作中，并且还分析了slate源码来探究了相关问题的实现。那么在后面的文章中，我们延续当前提到的表格但单元格位置的查找，来聊聊表格模块的设计及交互。
2025-01-20 10:44:00
1094
原创 Canvas简历编辑器-选中绘制与拖拽多选交互方案
在这里我们就依然在轻量级DOM的基础上，讨论了Canvas中描边与填充的绘制问题，以及的实现方式，然后我们实现了基本的选中绘制以及拖拽多选的交互设计，并且实现了Hover的效果，以及拖拽节点的移动。那么在后边我们可以聊一下fillRule规则设计、按需绘制图形节点，也可以聊到更多的交互设计，例如Resize的交互设计、参考线能力的实现、富文本的绘制方案等等。
2025-01-13 14:20:14
956
原创 Slate文档编辑器-Decorator装饰器渲染调度
在这里我们主要讨论了slate中的decoration装饰器的实现，以及在实际使用中可能会遇到的问题，主要是在跨节点的情况下，我们需要将range拆分为多个range，然后分别进行处理，并且还分析了源码来探究了相关问题的实现。那么在后边的文章中我们就主要聊一聊在slate中Path的表达，以及在React中是如何控制其内容表达与正确维护Path路径与Element内容渲染的方案。
2024-12-30 10:52:20
964
原创 Slate文档编辑器-TS类型扩展与节点类型检查
在这里我们更专注于文档编辑器的数据结构设计，聊聊基于slate实现的文档编辑器类型系统。在slate中还有很多额外的概念和操作需要关注，例如RangeOperationEditorElementPath等，那么在后边的文章中我们就主要聊一聊在slate中Path的表达，以及在React中是如何控制其内容表达与正确维护Path路径与Element内容渲染的，并且我们还可以聊一聊表格模块的设计与实现。
2024-12-23 10:23:24
1034
原创 Slate文档编辑器-WrapNode数据结构与操作变换
在这里我们聊到了WrapNode数据结构与操作变换，主要是对于嵌套类型的数据结构需要关注的内容，而实际上节点的类型还可以分为很多种，我们在大范围上可以有BlockNodeTextNode，在BlockNode中我们又可以划分出BaseNodeWrapNodePairNodeVoidNode等，因此文中叙述的内容还是属于比较基本的，在slate中还有很多额外的概念和操作需要关注，例如RangeOperationEditorElementPath等。那么在后边的文章中我们就主要聊一聊在slate中Path。
2024-11-18 10:31:12
609
1
原创 服务端SSE数据代理与基于fetch的EventSource实现
是一种由服务器单向推送实时更新到客户端的方案，基本原理是客户端通过HTTP请求打开与服务端的持久连接，服务端可以通过该连接连续发送事件数据。SSE适用于需要持续更新数据的应用，如实时通知、消息推送和动态内容更新，相比于WebSocket的数据通信方案更加轻量，SSE更易于实现且更适合简单的单向数据流场景。
2024-11-12 10:19:18
689
原创 初探富文本之搜索替换算法
在我们的在线文档系统中，除了基础的富文本编辑能力外，搜索替换的算法同样也是重要的功能实现。纯文本搜索替换算法相对来说是比较容易实现的，而在富文本的场景中，由于存在图文混排、嵌入模块如Mention等，实现这一功能则相对要复杂得不少。那么本文则以Quill实现的富文本编辑器为基础，通过设计索引查找和图层渲染的方式来实现搜索替换。
2024-11-04 09:43:26
455
原创 Canvas简历编辑器-选中绘制与拖拽多选交互设计
在这里我们就依然在轻量级DOM的基础上，讨论了Canvas中描边与填充的绘制问题，以及的实现方式，然后我们实现了基本的选中绘制以及拖拽多选的交互设计，并且实现了Hover的效果，以及拖拽节点的移动。那么在后边我们可以聊一下fillRule规则设计、按需绘制图形节点，也可以聊到更多的交互设计，例如Resize的交互设计、参考线能力的实现、富文本的绘制方案等等。
2024-10-28 09:41:11
539
原创 Canvas简历编辑器-Monorepo+Rspack工程实践
在这里我们聊了为什么要用Monorepo以及简单聊了一下的优势，然后解决了在子项目开发中会遇到的TS编译、项目编译的两个实际问题，分别在MonorepoRspackWebpack项目中相关的部分实践了一下，最后还简单聊了一下利用直接在Git Pages部署在线DEMO。那么再往后边的文章中，我们就需要聊一聊如何实现 层级渲染与事件管理 的能力设计。
2024-09-18 10:37:56
1399
原创 基于Service Worker实现WebRTC局域网大文件传输能力
是一种驻留在用户浏览器后台的脚本，能够拦截和处理网络请求，从而实现丰富的离线体验、缓存管理和网络效率优化。请求拦截是其关键功能之一，通过监听fetch事件，可以捕获所有向网络发出的请求，并有选择地处理这些请求，例如从缓存中读取响应，或者对请求进行修改和重定向，进而实现可靠的离线浏览和更快速的内容加载。
2024-09-09 09:16:44
1913
原创 Canvas简历编辑器-图形绘制与状态管理(轻量级DOM)
在这里我们聊了聊如何抽象基本的图形绘制以及状态的管理，因为我们的需求在这里所以我们的图形绘制能力会设计的比较简单，而状态管理则是迭代了三个方案才确定通过轻量DOM的方式来实现，那么再往后，我们就需要聊一聊如何实现 层级渲染与事件管理 的能力设计。
2024-08-06 10:32:05
1129
原创 神秘 Arco 样式出现，祭出 Webpack 解决预期外的引用问题
Webpack是现代化的静态资源模块化管理和打包工具，其能够通过插件配置处理和打包多种文件格式，生成优化后的静态资源，核心原理是将各种资源文件视为模块，通过配置文件定义模块间的依赖关系和处理规则，从而实现模块化开发。Webpack提供了强大的插件和加载器系统，支持了代码分割、热加载和代码压缩等高效构建能力，显著提升了开发效率和性能。是Webpack中用于解析模块路径的配置项，其负责告诉Webpack如何查找和确定模块的位置，核心功能是通过配置来定义模块的查找机制和优先级，从而确保Webpack。
2024-08-06 10:21:49
1114
原创 安装量终于破千了！聊聊浏览器扩展开发的相关问题与解决方案
浏览器扩展的开发还是比较复杂的一件事，特别是在需要兼容v2和v3的情况下，很多设计都需要思考是否能够正常在v3上实现，在v3的浏览器扩展上失去了很多灵活性，但是相对也获取了一定的安全性。不过浏览器扩展本质上的权限还是相当高的，例如即使是v3我们仍然可以在Chrome上使用来实现很多事情，扩展能做的东西实在是太多了，如果不了解或者不开源的话根本不敢安装，因为扩展权限太高可能会造成很严重的例如用户信息泄漏等问题，即使是比如像Firefox那样必须要上传源代码的方式来加强审核，也很难杜绝所有的隐患。
2024-07-22 09:11:17
848
原创 基于Chrome扩展的浏览器可信事件与网页离线PDF导出
Chrome扩展是一种可以在浏览器中添加新功能和修改浏览器行为的软件程序，我们可以基于Manifest规范的API实现对于浏览器和Web页面在一定程度上的修改，例如广告拦截、代理控制等。则是Chrome浏览器提供的一套与浏览器进行交互的API，我们可以基于DevTools协议控制Chromium内核的浏览器进行各种操作，例如操作页面元素、模拟用户交互等。
2024-07-02 09:10:13
1414
原创 基于React的SSG静态站点渲染方案
静态站点生成是一种在构建时生成静态HTML等文件资源的方法，其可以完全不需要服务端的运行，通过预先生成静态文件，实现快速的内容加载和高度的安全性。由于其生成的是纯静态资源，便可以利用CDN等方案以更低的成本和更高的效率来构建和发布网站，在博客、知识库、API文档等场景有着广泛应用。
2024-06-04 09:00:24
1071
原创 初探富文本之基于虚拟滚动的大型文档性能优化方案
虚拟滚动是一种优化长列表性能的技术，其通过按需渲染列表项来提高浏览器运行效率。具体来说，虚拟滚动只渲染用户浏览器视口部分的文档数据，而不是整个文档结构，其核心实现根据可见区域高度和容器的滚动位置计算出需要渲染的列表项，同时不渲染额外的视图内容。虚拟滚动的优势在于可以大大减少DOM操作，从而降低渲染时间和内存占用，解决页面加载慢、卡顿等问题，改善用户体验。
2024-06-03 08:43:09
693
1
原创 从油猴脚本管理器的角度审视Chrome扩展
最终在这里我们可能已经明确了浏览器扩展的一些非常Hack能力的实现，同时可能也会发现浏览器扩展的权限是真的非常高，在V2版本中甚至连HTTP Only的Cookie都可以拿到，在V3中限制就多了起来，但是整体的权限还是非常高的，所以在选择浏览器扩展时还是需要谨慎，要不就选择用户比较多的，要不就选择开源的。不过之前类似EDGE扩展的事件还是不容易避免，简单来说就是EDGE。
2024-05-13 08:51:39
1141
原创 Canvas简历编辑器-我的剪贴板里究竟有什么数据
本文我们介绍总结了应该如何操作剪贴板，也就是我们在浏览器的复制粘贴行为，并且在此基础上聊到了在Canvas图形编辑器中的焦点问题以及如何实现复制粘贴行为，虽然暂时不涉及到Canvas本身，但是这都是作为编辑器本身的基础能力，也是通用的能力可以学习。针对于这个编辑器我们可以介绍的能力还有很多，整体来看会涉及到数据结构、History模块、复制粘贴模块、画布分层、事件管理、无限画布、按需绘制、性能优化、焦点控制、参考线、富文本、快捷键、层级控制、渲染顺序、事件模拟、PDF。
2024-05-07 10:55:04
1125
原创 Canvas图形编辑器-数据结构与History(undo/redo)
本文我们介绍总结了我们的图形编辑器中数据结构的设计以及History模块的实现，虽然暂时不涉及到Canvas本身，但是这都是作为编辑器本身的基础能力，也是通用的能力可以学习。后边我们可以介绍的能力还有很多，例如复制粘贴模块、画布分层、时间管理、无限画布、按需绘制、性能优化、焦点控制、参考线、富文本、快捷键、层级控制、渲染顺序、事件模拟、PDF排版等等，整体来说还是比较有意思的，欢迎关注我并留意后续的文章。
2024-04-15 10:30:41
1063
原创 基于Canvas实现的简历编辑器
这次对于Canvas的体验让我感觉还是不错的，后边我也会写一些在实现的时候碰到的问题以及如何解决问题的文章，不过我目前的主业还是还是写富文本编辑器，富文本编辑器也是天坑中的一员，后边也可能会先写编辑器相关的文章。
2024-04-15 10:28:43
1595
原创 基于OT与CRDT协同算法的文档划词评论能力实现
当我们实现在线文档平台时，划词评论的功能是非常必要的，特别是在重文档管理流程的在线文档产品中，文档反馈是非常重要的一环，这样可以帮助文档维护者提高文档质量。而即使是单纯的将划词评论作为讨论区，也是非常有用的，尤其是在文档并不那么完善的情况下，对接产品系统的时候可以得到文档之外的输入。那么本文将通过引入协同算法来解决冲突，从而实现在线文档的划词评论能力。我们即将要聊的OT与CRDT。
2024-04-10 09:14:11
898
原创 深入在线文档系统的 MarkDown/Word/PDF 导出能力设计
当我们实现在线文档的系统时，通常需要考虑到文档的导出能力，特别是对于私有化部署的复杂ToB产品来说，文档的私有化版本交付能力就显得非常重要，此外成熟的在线文档系统还有很多复杂的场景，都需要我们提供文档导出的能力。那么本文就以Quill富文本编辑器引擎为基础，探讨文档导出为MarkDownWordPDF插件化设计实现。文章中我们即将要聊到的每个转换器设计都有相关示例，在实现DEMO的过程中也是踩了很多坑，给予的示例可以完成纯前端的数据转换，也可以通过Node来实现，还是比较有参考价值的。Markdown。
2024-03-27 08:58:47
1756
原创 毕业半年多了，回顾从大学到现在搞过的很有意思的开源项目
感觉还是做了一些比较有意思的项目的，我个人觉得如果是搞技术的话，保持对技术的好奇心是一件很重要的事，能用技术来解决平时遇到的问题也是非常重要的一点，昨天听群友说他做了个项目用算法来下棋，面试官问他这个项目有什么用，我觉得这就是个很有意思的项目，过年回家的时候跟大爷下棋能跟大爷下的有来有回可不是有用吗，提供情绪价值也是很重要的。再说回来我做的这些项目，最开始我的目的就非常简单，我觉得这件事有意思我就去做了，并且在做的过程中不断解决了很多问题，并且也不断提升了技术水平，还能写很多博客，何乐而不为。
2024-03-11 09:00:00
814
1
原创 初探富文本之富文本diff算法与文档对比视图的实现
当我们实现在线文档的系统时，通常需要考虑到文档的版本控制与审核能力，并且这是这是整个文档管理流程中的重要环节，那么在这个环节中通常就需要文档的diff能力，这样我们就可以知道文档的变更情况，例如文档草稿与线上文档的差异、私有化版本A与版本B之间的差异等等，本文就以Quill富文本编辑器引擎为基础，探讨文档diff算法的实现。
2024-02-21 09:00:08
691
原创 仿照AirDrop(隔空投送)优雅地在局域网中传输文件
webrtc是一项实时通讯技术，允许网络应用或者站点，在不借助中间媒介的情况下，建立浏览器之间点对点的连接，实现视频流、音频流、文件等等任意数据的传输，WebRTC包含的这些标准使用户在无需安装任何插件或者第三方的软件的情况下，可以创建点对点的数据分享和电话会议等。
2024-01-01 10:15:47
1431
原创 初探webpack之单应用多端构建
在现代化前端开发中，我们可以借助构建工具来简化很多工作，单应用多端构建就是其中应用比较广泛的方案，webpack中提供了loader与plugin来给予开发者非常大的操作空间来操作构建过程，通过操作中间产物我们可以非常方便地实现多端构建，当然这是一种思想而不是深度绑定在webpack中的方法，我们也可以借助其他的构建工具来实现，比如rollupviterspack等等。
2023-12-02 12:15:42
1154
原创 从零实现的浏览器Web脚本
在前文中我们探讨了很多关于富文本引擎和协同的能力，在本文中我们更偏向具体的应用组件实现。在一些场景中比如组件库的文档编写时，我们希望能够有实时预览的能力，也就是用户可以在文档中直接编写代码，然后在页面中实时预览，这样可以让用户更加直观的了解组件的使用方式，这也是很多组件库文档中都会有的一个功能。那么我们在本文就侧重于React组件的实时预览，来探讨相关能力的实现。文中涉及的相关代码都在，在富文本文档中的实现效果可以参考。
2023-11-03 20:25:19
725
原创 初探富文本之React实时预览
在前文中我们探讨了很多关于富文本引擎和协同的能力，在本文中我们更偏向具体的应用组件实现。在一些场景中比如组件库的文档编写时，我们希望能够有实时预览的能力，也就是用户可以在文档中直接编写代码，然后在页面中实时预览，这样可以让用户更加直观的了解组件的使用方式，这也是很多组件库文档中都会有的一个功能。那么我们在本文就侧重于React组件的实时预览，来探讨相关能力的实现。文中涉及的相关代码都在，在富文本文档中的实现效果可以参考。
2023-10-15 13:27:56
994
原创 ReactPortals传送门
提供了一种将子节点渲染到父组件以外的DOM节点的解决方案，即允许将JSX作为children渲染至DOM的不同部分，最常见用例是子组件需要从视觉上脱离父容器，例如对话框、浮动工具栏、提示信息等。
2023-09-29 10:13:57
829
原创 SVG与foreignObject元素
可缩放矢量图形基于标记语言，用于描述二维的矢量图形。作为一个基于文本的开放网络标准，能够优雅而简洁地渲染不同大小的图形，并和、、等其他网络标准无缝衔接。图像及其相关行为被定义于文本文件之中，这意味着可以对其进行搜索、索引、编写脚本以及压缩，此外这也意味着可以使用任何文本编辑器和绘图软件来创建和编辑。是可缩放矢量图形的缩写，其是一种用于描述二维矢量图形的可扩展标记语言标准，与基于像素的图像格式(如和)不同，使用数学方程和几何描述来定义图像，这使得其能够无损地缩放和调整大小，而不会失真或模糊。图像由基本形状(如
2023-08-11 21:33:04
1822
原创 从零实现的Chrome扩展
Chrome扩展是一种可以在Chrome浏览器中添加新功能和修改浏览器行为的软件程序，例如我们常用的AdGuard等等，这些拓展都是可以通过来修改、增强浏览器的能力，用来提供一些浏览器本体没有的功能，从而实现一些有趣的事情。
2023-07-16 16:22:48
1670
原创 基于drawio构建流程图编辑器
drawio是一款非常强大的开源在线的流程图编辑器，支持绘制各种形式的图表，提供了Web端与客户端支持，同时也支持多种资源类型的导出。
2023-06-24 11:15:05
2426
原创 React闭包陷阱
是React 16.8引入的一个新特性，其出现让React的函数组件也能够拥有状态和生命周期方法，其优势在于可以让我们在不编写类组件的情况下，更细粒度地复用状态逻辑和副作用代码，但是同时也带来了额外的心智负担，闭包陷阱就是其中之一。
2023-05-21 10:11:44
1155
原创 Hooks与事件绑定
在React中，我们经常需要为组件添加事件处理函数，例如处理表单提交、处理点击事件等。通常情况下，我们需要在类组件中使用this关键字来绑定事件处理函数的上下文，以便在函数中使用组件的实例属性和方法。是React 16.8引入的一个新特性，其出现让React的函数组件也能够拥有状态和生命周期方法。Hooks的优势在于可以让我们在不编写类组件的情况下，复用状态逻辑和副作用代码，Hooks的一个常见用途是处理事件绑定。
2023-04-16 10:03:27
906
原创 Ubuntu20.04配置CuckooSandbox环境
Ubuntu20.04配置CuckooSandbox环境因为最近要做恶意软件分析，阅读论文发现动态分析的效果普遍比静态分析的效果要好一些，所以需要搭建一个动态分析的环境，查阅资料发现Cuckoo Sandbox是不错的自动化分析环境，但是搭建起来还是比较复杂的，主要是在配置虚拟机环境以及网络配置方面。基础环境文中的环境是Ubuntu 20.04 Server，也就是服务器版，后来为了配置虚拟机尝试过GNOME还有xfce4桌面环境，其实纯服务器环境即可完成配置，但是在配置虚拟机环境时可能会卡，所以还是
2023-04-12 17:01:49
1493
1
原创 初探富文本之CRDT协同实例
在前边初探富文本之CRDT协同算法一文中我们探讨了为什么需要协同、分布式的最终一致性理论、偏序集与半格的概念、为什么需要有偏序关系、如何通过数据结构避免冲突、分布式系统如何进行同步调度等等，这些属于完成协同所需要了解的基础知识，实际上当前有很多成熟的协同实现，例如automergeyjs等等，本文就是关注于以yjs为CRDT协同框架来实现协同的实例。
2023-03-05 17:40:54
581
原创 初探富文本之CRDT协同算法
由于CRDT是处理分布式系统数据同步问题的通用解决方案，所以本文并没有局限于在富文本数据结构的设计，而是从分布式数据同步的角度来理解CRDT，并且穿插着CRDT在富文本领域上的应用，从而让我们能够更好地理解这个数据模型。同样，本文介绍的内容也只是冰山一角，分布式数据的同步一直以来都是个复杂的问题，回归到富文本领域上，如何保证多人协同的编辑器性能、在CAP理论下如何做取舍策略、如何保证数据的稳定性可恢复可回溯、光标的同步处理、如何处理Undo/Redo等等，都是需要深入研究并且设计的。
2023-02-12 16:52:57
733
原创 初探富文本之OT协同实例
在前边初探富文本之OT协同算法一文中我们探讨了为什么需要协同、为什么仅有原子化的操作并不能实现协同、为什么要有操作变换、如何进行操作变换、什么时候能够应用操作、服务端如何进行协同调度等等，这些属于完成协同所需要了解的基础知识，实际上当前有很多成熟的协同实现，例如ot.jsShareDBot-jsonEasySync等等，本文就是以ShareDB为OT协同框架来实现协同的实例。
2023-01-27 17:52:16
994
原创 初探富文本之OT协同算法
在上边的论述中我们似乎得到了一个不错的方案，但是实际上文中描述的内容也只是冰山一角，一个稳定协同过程还面临着诸多问题，例如需要支持多人协同的Undo/Redo，保证客户端与服务端OT算法的统一、在CAP理论下如何做取舍策略、如何保证多人协同的编辑器性能、如何保证数据的稳定性可恢复可回溯、光标的同步处理等等，当然不可能拥有从一开始就完美的架构设计，都是在发现问题之后一步步地让其变得完美。说了这么多，实际上目前已经有很多开源的OT。
2023-01-08 21:57:06
1566
原创 初探富文本之编辑器引擎
在前文中我们介绍了富文本的基础概念，以及富文本的基本发展历程，那么在本文中将会介绍当前主流开源的富文本编辑器引擎。当前使用最广泛的富文本编辑器是L1的富文本编辑器，其能满足绝大部份使用场景，由此也诞生了非常多优秀的开源富文本引擎，这其中有仅提供引擎的编辑器例如Slate.js，也有提供了部分开箱即用的功能的例如Quill.js，也有基于这些引擎二次开发的例如Plate.js，本文主要介绍了Slate.js、Quill.js、Draft.js三款编辑器引擎。
2022-12-18 19:18:11
819
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人