随笔分类 - Plugin
摘要：深入在线文档系统的 MarkDown/Word/PDF 导出能力设计 当我们实现在线文档的系统时，通常需要考虑到文档的导出能力，特别是对于私有化部署的复杂ToB产品来说，文档的私有化版本交付能力就显得非常重要，此外成熟的在线文档系统还有很多复杂的场景，都需要我们提供文档导出的能力。那么本文就以Qui
阅读全文
摘要：初探富文本之文档diff算法 当我们实现在线文档的系统时，通常需要考虑到文档的版本控制与审核能力，并且这是这是整个文档管理流程中的重要环节，那么在这个环节中通常就需要文档的diff能力，这样我们就可以知道文档的变更情况，例如文档草稿与线上文档的差异、私有化版本A与版本B之间的差异等等，本文就以Qui
阅读全文
摘要：基于WebRTC的局域网文件传输 在前一段时间，我想在手机上向电脑发送文件，因为要发送的文件比较多，所以我想直接通过USB连到电脑上传输，等我将手机连到电脑上之后，我发现手机竟然无法被电脑识别，能够充电但是并不能传文件，因为我的电脑是Mac而手机是Android，所以无法识别设备这件事就变得合理了起
阅读全文
摘要：初探webpack之单应用多端构建 在现代化前端开发中，我们可以借助构建工具来简化很多工作，单应用多端构建就是其中应用比较广泛的方案，webpack中提供了loader与plugin来给予开发者非常大的操作空间来操作构建过程，通过操作中间产物我们可以非常方便地实现多端构建，当然这是一种思想而不是深度
阅读全文
摘要：从零实现的浏览器Web脚本 在之前我们介绍了从零实现Chrome扩展，而实际上浏览器级别的扩展整体架构非常复杂，尽管当前有统一规范但不同浏览器的具体实现不尽相同，并且成为开发者并上架Chrome应用商店需要支付5$的注册费，如果我们只是希望在Web页面中进行一些轻量级的脚本编写，使用浏览器扩展级别的
阅读全文
摘要：初探富文本之React实时预览 在前文中我们探讨了很多关于富文本引擎和协同的能力，在本文中我们更偏向具体的应用组件实现。在一些场景中比如组件库的文档编写时，我们希望能够有实时预览的能力，也就是用户可以在文档中直接编写代码，然后在页面中实时预览，这样可以让用户更加直观的了解组件的使用方式，这也是很多组
阅读全文
摘要：# 从零实现的Chrome扩展 `Chrome`扩展是一种可以在`Chrome`浏览器中添加新功能和修改浏览器行为的软件程序，例如我们常用的`TamperMonkey`、`Proxy SwitchyOmega`、`AdGuard`等等，这些拓展都是可以通过`WebExtensions API`来修改
阅读全文
摘要：# 基于drawio构建流程图编辑器 `drawio`是一款非常强大的开源在线的流程图编辑器，支持绘制各种形式的图表，提供了`Web`端与客户端支持，同时也支持多种资源类型的导出。 ## 描述 在我们平时写论文、文档时，为了更好地阐述具体的步骤和流程，我们经常会有绘制流程图的需求，这时我们可能会想到
阅读全文
摘要：初探富文本之CRDT协同实例 在前边初探富文本之CRDT协同算法一文中我们探讨了为什么需要协同、分布式的最终一致性理论、偏序集与半格的概念、为什么需要有偏序关系、如何通过数据结构避免冲突、分布式系统如何进行同步调度等等，这些属于完成协同所需要了解的基础知识，实际上当前有很多成熟的协同实现，例如aut
阅读全文
摘要：初探富文本之CRDT协同算法 CRDT的英文全称是Conflict-free Replicated Data Type，最初是由协同文本编辑和移动计算而发展的，现在还被用作在线聊天系统、音频分发平台等等。当前CRDT算法在富文本编辑器领域的协同依旧是典型的场景，常用于作为实现文档协同的底层算法，支持
阅读全文
摘要：初探富文本之OT协同实例 在前边初探富文本之OT协同算法一文中我们探讨了为什么需要协同、为什么仅有原子化的操作并不能实现协同、为什么要有操作变换、如何进行操作变换、什么时候能够应用操作、服务端如何进行协同调度等等，这些属于完成协同所需要了解的基础知识，实际上当前有很多成熟的协同实现，例如ot.js、
阅读全文
摘要：初探富文本之OT协同算法 OT的英文全称是Operational Transformation，是一种处理协同编辑的算法。当前OT算法用的比较多的地方就是富文本编辑器领域了，常用于作为实现文档协同的底层算法，支持多个用户同时编辑文档，不会因为用户并发修改导致冲突，而导致结果不一致甚至数据丢失的问题。
阅读全文
摘要：初探富文本之编辑器引擎 在前文中我们介绍了富文本的基础概念，以及富文本的基本发展历程，那么在本文中将会介绍当前主流开源的富文本编辑器引擎。当前使用最广泛的富文本编辑器是L1的富文本编辑器，其能满足绝大部份使用场景，由此也诞生了非常多优秀的开源富文本引擎，这其中有仅提供引擎的编辑器例如Slate.js
阅读全文
摘要：初探富文本之富文本概述 富文本编辑器通常指的是可以对文字、图片等进行编辑的产品，具有所见即所得的能力。对于Input、Textarea之类标签，他们是支持内容编辑的，但并不支持带格式的文本或者是图片的插入等功能，所以对于这类的需求就需要富文本编辑器来实现。现在的富文本编辑器也已经不仅限于文字和图片，
阅读全文
摘要：基于NoCode构建简历编辑器 基于NoCode构建简历编辑器，要参加秋招了，因为各种模版用起来细节上并不是很满意，所以尝试做个简单的拖拽简历编辑器。 描述 Github ｜ Resume DEMO 对于无代码NoCode和低代码LowCode还是比较容易混淆的，在我的理解上，NoCode强调自己编
阅读全文
摘要：基于slate构建文档编辑器 slate.js是一个完全可定制的框架，用于构建富文本编辑器，在这里我们使用slate.js构建专注于文档编辑的富文本编辑器。 描述 Github ｜ Editor DEMO 富文本编辑器是一种可内嵌于浏览器，所见即所得的文本编辑器。现在有很多开箱即用的富文本编辑器，例
阅读全文
摘要：竞态问题与RxJs 竞态问题通常指的是在多线程的编程中，输入了相同的条件，但是会输出不确定的结果的情况。虽然Js是单线程语言，但由于引入了异步编程，所以也会存在竞态的问题，而使用RxJs通常就可以解决这个问题，其使得编写异步或基于回调的代码更容易。 竞态问题 前边提到了竞态问题通常指的是在多线程的编
阅读全文
摘要：初探webpack之编写loader loader加载器是webpack的核心之一，其用于将不同类型的文件转换为webpack可识别的模块，即用于把模块原内容按照需求转换成新内容，用以加载非js模块，通过配合扩展插件，在webpack构建流程中的特定时机注入扩展逻辑来改变构建结果，从而完成一次完整的
阅读全文
摘要：TS内置类型与拓展 TypeScript具有类型系统，且是JavaScript的超集，其可以编译成普通的JavaScript代码，也就是说，其是带有类型检查的JavaScript。 内置类型 TypeScript提供了几种实用程序类型来促进常见的类型转换，这些类型在全局范围内可用。 Partial
阅读全文
摘要：初探webpack之搭建Vue开发环境 平时我们可以用vue-cli很方便地搭建Vue的开发环境，vue-cli确实是个好东西，让我们不需要关心webpack等一些繁杂的配置，然后直接开始写业务代码，但这会造成我们过度依赖vue-cli，忽视了webpack的重要性，当遇到一些特殊场景时候，例如Vu
阅读全文
