协同文档相关学习

发表于 分类于 本文字数： 556 阅读时长 ≈ 2 分钟

实现一个极简富文本编辑器

一个最基础的富文本编辑器应该具备以下能力：

  • 文本格式化：加粗、斜体、下划线、颜色、背景色等多种文本样式。​
  • 多媒体插入：图片、视频、文件、链接等。​
  • 撤销重做：用户在编辑过程中可以随时撤销和重做操作。​
  • 跨浏览器兼容性：在不同浏览器和平台上行为一致。​
  • 协作功能：多用户实时协作，显示协同光标和实时文档同步。

contenteditable

contenteditable属性

  • 可以使任何元素变为可编辑状态。通过设置 contenteditable=”true”，用户可以直接在元素内输入或删除文本。
  • 常用于构建富文本编辑器的编辑区域，简单高效。

示例

1
2
3
<div class="editor-content" contenteditable="true">​
  <p>这是一个简单的富文本编辑器。</p>​
</div>​

浏览器 execCommand

document.execCommand 是一种浏览器 API，用于在 HTML 文档中执行与文档内容相关的命令。该方法最初是为实现富文本编辑功能而设计的，可以让开发者轻松实现一些常见的编辑操作，如加粗文本、插入链接、剪切、复制、粘贴等。尽管这种方法在过去非常流行，但随着 Web 技术的发展，它的使用逐渐减少，并在一些现代浏览器中被标记为过时或即将废弃。

基本语法
1
document.execCommand(command, showUI, value);​
  • command (字符串): 要执行的命令名称，如 ‘bold’、’italic’、’copy’ 等。​
  • showUI (布尔值): 指示是否显示默认的用户界面，通常传入 false，因为许多命令都不支持或忽略这个参数。​
  • value (字符串): 与某些命令一起使用的值，如在插入链接时的 URL。对于不需要值的命令，该参数可以省略或传入 null。
常见命令

Selection + Range + Compiler

编辑器个性需求

@ 提及
/ 推荐补全
知识图谱

协同编辑核心实现

协同化的前提

协同底层传输协议

  • web socket
  • socket io

协同数据类别

  • 头像、光标
  • 业务核心数据

数据冲突

  • OT
  • CRDT
    • 面向过程
    • 面向状态、操作

常见方案