深入 Slate.js 编辑器 - 引言

[benjycui]

转载自知乎 https://zhuanlan.zhihu.com/p/301221338

我们是钉钉的文档协同团队，我们在做一些很有意义的事情，其中之一就是自研的文字编辑器。为了把自研文字编辑器做好，我们调研了开源社区各种优秀编辑器，Slate.js 是其中之一（实际上，自研文字编辑器前，我们就使用了很久的 Slate ）。

我们团队的同学把对 Slate 的理解，写成了小册子，想通过连载的形式分享给你，下面是小册子的目录及前言。

---

TOC

• 一行代码实现富文本编辑器
• Web 富文本编辑器简史
• Slate.js 设计
  • HTML 中的富文本
  • Slate.js 中的富文本
  • 节点寻址
  • 附录 - 不可变数据
  • 附录 - Memorize
• Slate.js 是怎么工作的
  • 大脑 - Controller
  • 指令系统
  • Operation
  • 插件体系
  • Normalize
  • Decoration
  • Annotation
• 模型与视图的同步
  • Tiny Slate.js：实现一个 Mini Slate.js
  • 设计数据结构
  • 设计 Controller
  • 实现编辑器组件
• Slate.js 生态现状
  • 兼容其他格式
  • 单元测试
  • 移动端编辑器
• 挑战与变革
  • 难于完美的编辑器
  • 大跃进 - Slate.js 0.50
• 附录 - 协同理论
  • OT 算法
  • 协同调度
• 关于作者

---

一行代码实现富文本编辑器

富文本编辑器，指的是用户能够在浏览器中编排富文本（具有风格及排版的文本，如可以设定字体样式，进行图文混排等）。通常，在英文社区，习惯称富文本编辑器为 「 WYSIWYG Editor （ what you see is what you get，所见即所得编辑器）」。 当网站需要一个富文本编辑器时？你是否也会踟蹰在编辑器的选择？是选择百度出品的老牌编辑器 UEditor，它最熟悉国内用户，但是已经长期不更新了，还是选择最流行的 CKEditor，如果愿意花钱，CKEditor 团队还能为你提供企业级的支持；如果你对商业化嗤之以鼻，更愿意拥抱开源社区，近几年，Draft.js ，Slate.js ，和 ProseMirror 等新一代编辑器也纷至沓来。 但是如果有人告诉你「 1 行代码」就能实现一个富文本编辑器，你会相信吗？即便你在一个非常古老的浏览器，不借助任何第三方库，也是可以做到的：

<div contentEditable>请输入...</div>

这个编辑器已经具备了基础的文本格式化（加粗、斜体），undo/redo 功能了，但是为什么社区的富文本编辑器还是源源不断出现呢？我们先稍微回顾一下 Web 富文本编辑器的历史。

---

如果你对协同文档技术感兴趣，也可以通过知乎 https://zhuanlan.zhihu.com/p/301221338 文章中的钉钉群与微信群和我们一同讨论。

[a408115319]

活捉一个大佬 https://github.com/ant-design/ant-design/graphs/contributors

[nl101531]

语雀的编辑器已经很好用了