8
深入 Slate.js - Slate.js 简介
source link: https://zhuanlan.zhihu.com/p/324209467
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
本文是「深入 Slate.js」系列的第 3 篇内容 - Slate.js 简介。
Slate.js 简介
为什么选择 Slate.js 来学习富文本编辑器呢？主要是因为：
- 它是一个「 非常轻量 」的解决方案：Slate.js 几乎没有集成任何功能，只是提供了一个插件扩展机制给开发者去实现想要的功能。蝇量级的内核方便读者对编辑器设计 “见微知著”。
- 它是「 视图无关 」的：Slate.js 定义了一套脱离 UI 实现的数据模型，考虑到我们不是要再学习一遍 React 或者 Vue，这也能让我们让脱离 UI 的繁文缛节，聚焦到编辑器的模型设计上。
- 它为「 协同编辑 」所设计：因为网络条件、客户端硬件、应用架构的限制，早期的一些 Web 富文本编辑器并没有考虑到多人实时协同，Slate.js 的模型设计天然就亲和协同编辑，通过学习 Slate.js，我们也能借道了解基础的多人协作文档工作原理。
我们先来看一个简单地 Slate.js 的 Demo，这个 Demo 展示了一个支持「文本加粗」的富文本编辑器：
从用户选中一段文本，并按下「加粗」的快捷键，到最后看见「加粗的文本」:
透过这个 Demo，我们不妨思考，基于视图模型相分离的架构：
- Slate.js 是怎么知道用户想要加粗文本的？
- Slate.js 是怎么知道当前用户选中了哪些文本的？
- Slate.js 如何根据用户意图，去刷新文档模型的？
- 新的文档模型，最终又如何渲染回视图，成为了用户所见？
- 这个过程是如何做到对多人协同友好的？
- Slate.js 又是如何保障文档中的每个元素的内容和位置都符合预期呢？
当上面的问题我们都能回答好的时候，我们也就理解了 Slate.js 是如何设计和实现的。现在，我们不妨抛开视图层，看看 Slate.js 是如何设计内核模型的。
如果你对协同文档技术感兴趣，也可以加入下面的群（钉钉/微信），和我们一同讨论。
https:// qr.dingtalk.com/action/ joingroup?code=v1,k1,FSwHUda2hGA0PvtY34qY68ZWAC9bRkUAvN/NH83ovJ8= <br> https:// weixin.qq.com/g/AQYAAEk 4qxSX1JWBg6LJzUXNlEGIyR70uhBLCLptE5D12sRogH7CHAGaQQn-FMav (二维码自动识别)
也欢迎关注本账号，我们每周都会更新～
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK