Code Editor架构与设计

多人实时协同编辑，操作变换算法，数据一致性

重要通知

。

基本概况

代码编辑器 CodeMirror：https://codemirror.net/6/

编辑器最新实现方案

不依赖浏览器的contenteditable特性，命令执行不依赖document.execCommand API。数据、选区、编辑命令、视图渲染等所有组件完全由编辑器自己定义和实现 Range/Selection、document.execCommand、undo/redo 复制copy、cut剪贴、粘贴paste Range/Selection 光标系统内容过滤组件系统: 自定义输入框、光标、输入法、删除等文字处理系统: 尺寸、颜色、背景、下划线、删除线、加粗、字体、字号复制、粘贴多媒体：图片、音频、视频排版系统: 交互系统: 网络系统: 长链接、断网重连、心跳机制等。协同编辑引擎: 排版计算引擎:

业界最先进的实现方案 | 不依赖浏览器的contenteditable特性

有道云笔记、Google Docs、苹果的 iCloud Page

摒弃 execCommnand()

其中具有代表性的包括：CKEditor 5、Slate.js、Quill.js、Draft.js、ProseMirror.

document.execCommand: https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand
Selection：https://developer.mozilla.org/zh-CN/docs/Web/API/Selection HTMLElement.contentEditable: https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/contentEditable PouchDB(数据双向同步，即多人协同)：https://pouchdb.com/

简介与核心思想

光标追踪系统、文本重排系统、协同系统、数据、选区、编辑命令、视图渲染等所有组件 Range（区间、范围）/Selection（选区）、document.execCommand、undo/redo、内容过滤、DOMParser API

实现案例

腾讯文档前端架构思考和实践: https://notes.kaibinluo.com/ 有道云笔记跨平台富文本编辑器的技术演进：https://mp.weixin.qq.com/s/9gDI1r9aAu6dHJhXg34eIg 谷歌文档：What’s different about the new Google Docs?：https://drive.googleblog.com/2010/09/whats-different-about-new-google-docs.html 富文本编辑器的技术演进之路：https://mp.weixin.qq.com/s/PyXpfiZ-PiP8S5pQcHRZng 石墨文档协同文档编辑支持多人实时作业冲突解决算法编辑器初体验：https://zhuanlan.zhihu.com/p/90931631
caret-color: https://developer.mozilla.org/zh-CN/docs/Web/CSS/caret-color
各大编辑器对比：https://panjiachen.github.io/vue-element-admin-site/zh/feature/component/rich-editor.html#%E5%B8%B8%E8%A7%81%E5%AF%8C%E6%96%87%E6%9C%AC

个人作品

https://editor.yanmao.cc/

编辑器实现技术列表

TinyMCE：https://www.tiny.cloud/ | https://www.tiny.cloud/docs/demo/full-featured/ | http://tinymce.ax-z.cn/ CKEditor：https://ckeditor.com/ | https://ckeditor.com/ckeditor-5/demo/#classic wangEditor：https://www.wangeditor.com/ | https://github.com/wangeditor-team/wangEditor KaTeX froala-editor：https://froala.com/ | https://froala.com/wysiwyg-editor/ Draft.js：https://draftjs.org/ | https://github.com/facebook/draft-js | ReactPage：https://react-page.github.io/ | https://github.com/react-page/react-page Slatejs：https://github.com/ianstormtaylor/slate | https://www.slatejs.org/examples/richtext UEditor：http://fex.baidu.com/ueditor/ | https://github.com/fex-team/ueditor | http://www.miniui.com/demo/thirdparty/htmleditor/ueditor/ueditor.html squire： medium-editor： Quill.js：https://quilljs.com/ | https://quilljs.com/docs/formats/ summernote： TextBus：https://textbus.tanboui.com/ Simditor： ProseMirror(从零开始写一个 Schema)：https://prosemirror.xheldon.com/ | https://prosemirror.xheldon.com/ KindEditor：http://kindeditor.net/ | http://kindeditor.net/demo.php KissyEditor：http://docs.kissyui.com/1.4/docs/html/api/editor/editor.html vue-quill-editor

LaTeX：LaTeX 是一个高质量的排版系统；它包括专为制作技术和科学文件而设计的功能。LaTeX 是科学文件交流和出版的事实上的标准。

https://www.latex-project.org/

公式编辑器

https://demo.wiris.com/mathtype/en/developers.php

官网：https://katex.org/ 文档：https://katex.org/docs/api.html GitHub：https://github.com/KaTeX/KaTeX

公式编辑器

https://demo.wiris.com/mathtype/en/developers.php

简介与核心思想

KaTeX，编辑数学公式，是LaTeX的子集

不依赖contenteditable：ritzy、Ace

编辑器产品列表

金山文档、腾讯文档、有道云笔记、Google文档、Quip、百度文档、石墨文档、永中优云、Zoho Doc、云竹协作、松果文档、一起写、语雀、飞书

语法

<div contenteditable="true"></div>
结构：bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)
多人实时作业冲突解决算法 | 协同文档的技术实现-腾讯Web前端IMWeb团队社区腾讯文档、有道云笔记、Google Docs

Slate 富文本编辑框架

复制与粘贴：标准DOM结构转化与兼容

文字排版系统

安全措施

DOM API Command 系统撤销(undo)/重做(redo) Range/Selection 光标管理系统

编辑系统

功能增强

上传 | Image | Video | Audio | Media 高亮 | HighLight 插入: Excel 导入功能 | 导出功能多人协同系统 | Google Doc

事件管理

鼠标事件 | 键盘事件

编辑器基本操作

undoredo

Selection

Range

filter

OT协同技术

https://github.com/Operational-Transformation/ot.js 揭秘在线协同文档 OT 算法：https://mp.weixin.qq.com/s/Xx6GBNL2SgZXw1pBGzbEOg

https://www3.ntu.edu.sg/scse/staff/czsun/projects/otfaq/ https://srijancse.medium.com/operational-transformation-the-real-time-collaborative-editing-algorithm-bf8756683f66 https://en.wikipedia.org/wiki/Operational_transformation

操作转换( OT ) | https://en.wikipedia.org/wiki/Operational_transformation

是一种用于支持高级协作软件系统中的一系列协作功能的技术。其应用程序扩展到包括组撤消、锁定、冲突解决、操作通知和压缩、组感知、HTML/XML 和树结构文档编辑、协作办公生产力工具、应用程序共享和协作计算机- 辅助媒体设计工具。

几种常见的优化算法效率和性能的方法：数据压缩：通过对数据进行压缩，可以减少数据的传输量和存储空间，从而提高算法的效率和性能。常用的压缩算法包括 LZW 压缩算法、gzip 压缩算法等。数据缓存：通过使用数据缓存，可以减少数据的重复传输和计算，从而提高算法的效率和性能。常用的数据缓存技术包括内存缓存、磁盘缓存等。增量同步：通过使用增量同步，可以减少数据的传输量和计算量，从而提高算法的效率和性能。增量同步只传输数据的增量部分，而不是整个数据。并发处理：通过使用并发处理，可以提高算法的效率和性能。并发处理可以同时处理多个用户的编辑操作，从而提高算法的响应速度和并发性能。数据模型优化：通过对数据模型进行优化，可以减少数据的存储空间和计算量，从而提高算法的效率和性能。常用的数据模型优化技术包括数据索引、数据分区等。

简介与核心思想

OT算法（Operation Transformation），即操作合并算法，是在线协作系统中经常使用的协同算法。原子操作的复杂度决定了transform实现的复杂度。

案例

协作在线文档：https://www.zhihu.com/question/274573543 ShareJS – 在您的应用程序中实时并发编辑：https://sharejs.org/ 腾讯文档-实时协同编辑：https://www.cnblogs.com/DarkCrow/p/14925581.html

核心技术

时序性：

版本源的管理机制

版本源：即某一个用户在更新前的依赖版本。服务器必须维护一份稳定的有效版本源队列。生成新的版本源：注销失效的版本源：

客户端状态

服务器状态

代码示例

第三方插件体系

https://highlightjs.org/ 文档：https://highlightjs.org/usage/ 定制依赖包下载：https://highlightjs.org/download/

代码高亮

代码示例

  hljs.highlightAll();

  hljs.configure({   // optionally configure hljs
    languages: ['javascript', 'ruby', 'python']
  });

Theia架构设计与核心技术

官网：https://theia-ide.org/ GitHub：https://github.com/eclipse-theia/theia https://github.com/eclipse-theia

简介与核心思想

Theia IDE（eclipse-theia）是Eclipse 基金会打造的云端及桌面IDE框架。

Monaco Editor架构设计与核心技术

‌Monaco Editor的作者是Erich Gamma。‌Erich Gamma是《设计模式》一书的作者之一，他在苏黎世带领团队开发了Monaco Editor。

https://microsoft.github.io/monaco-editor/

Monaco Editor 是 Visual Studio Code (VSCode) 核心的文本编辑引擎，它为浏览器和桌面应用程序提供了强大的代码编辑功能。它是一个高度优化的编辑器，专为处理大规模代码库和多种编程语言而设计。以下是 Monaco Editor 的实现原理和关键技术概览：

模块化架构 Monaco Editor 采用模块化的设计，这样能够在需要的场景中延迟加载功能模块，保证性能和灵活性。它的模块分为以下几大类：

核心编辑模块：处理文本的编辑和基本操作，包括插入、删除、复制、粘贴等。语言服务模块：提供语言相关的功能支持，如语法高亮、自动补全、代码折叠等。渲染模块：负责将代码在屏幕上渲染出来，支持光标、选区等功能，并对大文件和多窗口做了优化。 2. 虚拟 DOM 和分区渲染 Monaco Editor 为了提升大文件的渲染性能，使用了类似于虚拟 DOM 的机制。它不会每次编辑时重新渲染整个文档，而是只渲染可见区域的文本块。以下是具体实现原理：

可见区域渲染：编辑器只渲染用户当前可见的文本行，当用户滚动页面时，动态更新和渲染新的可见区域，而不可见的部分则保持未渲染的状态。行缓冲区：Monaco Editor 维护一个行缓冲区，用于存储已经渲染过的行内容。通过缓冲区减少不必要的渲染操作，提高性能。视图层分离：逻辑层和渲染层是独立的，所有的用户输入都会被记录在内存中的逻辑模型里，而视图层只处理如何高效地呈现这些变化。 3. 基于 AST 的语法分析 Monaco Editor 使用抽象语法树（AST）来分析代码的结构。这个过程分为以下几个步骤：

词法分析：将用户输入的源代码分解为一系列的标记（Tokens），比如关键字、变量名、符号等。语法高亮：通过语言定义的词法规则，对标记进行颜色和样式的赋值，实现语法高亮。代码折叠与格式化：Monaco Editor 可以通过分析代码块之间的语法关系，自动实现代码折叠、自动缩进和格式化。 Monaco 支持多种语言的内置解析器，同时支持通过语言服务器协议（LSP）扩展其他编程语言的支持。

增量更新和优化 Monaco Editor 实现了增量更新的机制。当用户在编辑文本时，编辑器并不会重新计算或更新整个文档，而是只更新修改发生的部分。这种增量更新大大提高了编辑器在处理大文件时的性能。

文本差异计算：Monaco Editor 内部会在每次操作后计算文本的差异，通过最小化修改区域来只更新受影响的部分。延迟计算：一些复杂的功能（如错误提示、代码补全等）不会在每次字符输入后立即计算，而是通过延迟策略批量处理，减少性能开销。 5. 语言服务协议 (Language Server Protocol, LSP) Monaco Editor 支持 LSP，它将编辑器与语言服务器分离，使得不同语言的解析、错误检查和代码补全都可以通过外部的语言服务器来处理。

语言服务器：提供代码补全、语法检查、重构等功能，运行在独立的进程或线程中。编辑器客户端：Monaco Editor 作为客户端与语言服务器进行通信，接收并展示语言服务器返回的提示、错误信息、补全建议等。异步通信：通过 WebSocket 或其他异步机制与语言服务器进行通信，确保即使在复杂的代码分析过程中，编辑器依然保持流畅的用户体验。 6. 代码自动补全 (IntelliSense) Monaco Editor 提供类似 IntelliSense 的代码自动补全功能。通过以下机制实现：

上下文分析：当用户输入时，编辑器会根据当前的上下文提供智能提示，包括函数、变量名、方法签名等。语言服务：Monaco Editor 支持通过 LSP 向外部语言服务器请求自动补全信息。语言服务器基于代码的上下文和 AST 分析提供适合的补全建议。内置提示与自定义提示：Monaco 编辑器允许开发者自定义代码提示，通过注册自己的补全提供器，能够为特定场景或语言提供定制化的代码补全。 7. 键盘操作与快捷键绑定 Monaco Editor 提供了高度可定制的键盘操作支持。用户可以配置和绑定不同的快捷键来执行特定的操作，比如复制、粘贴、格式化代码等。每个按键操作会被映射到特定的命令，并通过内部的命令处理器进行调用。

多光标与列选择 Monaco Editor 提供了支持多光标和列选择的功能，允许用户同时编辑多个文本位置。

多光标：用户可以通过鼠标或键盘设置多个光标，实现在多个地方同时输入。列选择：通过按住 Alt 键，用户可以进行列选择，允许对列中的所有文本行进行同时编辑。 9. 插件与扩展支持 Monaco Editor 支持插件和扩展，允许开发者根据需求扩展编辑器功能。扩展可以为特定语言添加支持、提供代码格式化、集成调试工具等。

跨平台与轻量级设计 Monaco Editor 旨在通过纯 Web 技术实现轻量级的跨平台代码编辑器：

浏览器兼容性：Monaco Editor 可以嵌入到任何网页中，并且在主流的现代浏览器中都能够流畅运行。与 VSCode 的共享代码库：Monaco Editor 与 VSCode 共享了大部分代码，这使得它能够在不牺牲功能的情况下保持轻量。

# Code Editor架构与设计

# 基本概况

# 相关资源

# 编辑器最新实现方案

# 业界最先进的实现方案 | 不依赖浏览器的contenteditable特性

# 摒弃 execCommnand()

# 简介与核心思想

# 实现案例

# 个人作品

# 编辑器实现技术列表

# LaTeX：LaTeX 是一个高质量的排版系统；它包括专为制作技术和科学文件而设计的功能。LaTeX 是科学文件交流和出版的事实上的标准。

# 公式编辑器

# 公式编辑器

# 简介与核心思想

# 不依赖contenteditable：ritzy、Ace

# 编辑器产品列表

# 语法

# Slate 富文本编辑框架

# 复制与粘贴：标准DOM结构转化与兼容

# 文字排版系统

# 编辑系统

# 功能增强

# 事件管理

# 编辑器基本操作

# undoredo

# Selection

# Range

# filter

#

#

#

#

# OT协同技术

# 操作转换( OT ) | https://en.wikipedia.org/wiki/Operational_transformation

# 简介与核心思想

# 案例

# 核心技术

# 版本源的管理机制

# 客户端状态

# 服务器状态

# 代码示例

# 第三方插件体系

# 代码示例

# Theia架构设计与核心技术

# 简介与核心思想

# Monaco Editor架构设计与核心技术

#

#

#

Code Editor架构与设计

基本概况

相关资源

编辑器最新实现方案

业界最先进的实现方案 | 不依赖浏览器的contenteditable特性

摒弃 execCommnand()

简介与核心思想

实现案例

个人作品

编辑器实现技术列表

LaTeX：LaTeX 是一个高质量的排版系统；它包括专为制作技术和科学文件而设计的功能。LaTeX 是科学文件交流和出版的事实上的标准。

公式编辑器

公式编辑器

简介与核心思想

不依赖contenteditable：ritzy、Ace

编辑器产品列表

语法

Slate 富文本编辑框架

复制与粘贴：标准DOM结构转化与兼容

文字排版系统

编辑系统

功能增强

事件管理

编辑器基本操作

undoredo

Selection

Range

filter

OT协同技术

操作转换( OT ) | https://en.wikipedia.org/wiki/Operational_transformation

简介与核心思想

案例

核心技术

版本源的管理机制

客户端状态

服务器状态

代码示例

第三方插件体系

代码示例

Theia架构设计与核心技术

简介与核心思想

Monaco Editor架构设计与核心技术