前言
本教程基于近三个月开发富文本编辑器的一些心得，有不足之处请谅解。
项目在线demo：rendevoz.github.io/Reditor/ 支持拖拽排版，框选，列表，自定义组件渲染优化等
正文
当你在看到本段文字的时候，首先会想到什么？
熟悉HTML的同学可能会说，这不就是一个<blockquote>吗，再配合font-weight,font-style等css属性实现。
了解Markdown语法的同学可能会讲，输入> , * *, ** **以后就能有这种效果。
这两种想法都没错，然而此时问题就出现了，我如果想要这些效果，应该保存为<blockquote>呢，还是> 呢？或者其他的格式？
因此，我们需要一个统一的数据结构，能够做到表现与数据分离，在不同的渲染引擎下输出统一的结果。
比如使用JSON来表示:
{
type: 'blockquote',
children: [
{
text: '当你在看到'
},
{
text: '本段文字',
style: 'italic'
},
{
text: '的时候,'
},
{
text: '首先会想到什么?',
style: 'bold'
}
]
}
通过这种方式，我们几乎能够渲染出任何内容，而不必受某种schema的限制，而Slate.js正是为此而生的。
什么是Slate.js?
按照Slate自己的介绍：
Slate is a completely customizable framework for building rich text editors.
在我看来Slate相比Quill或者Draft.js，最大的优点就是自由。
你可以自定义数据的组织方式，渲染方式。而Slate能够帮你做到数据与实际DOM节点之间的互通，从而减少了大量对于contenteditable的开发工作。
接下来我将从以下几点帮助你深入理解Slate.js，并开发出一款可靠的富文本编辑器。
如果你有问题可以发到我的邮箱：realrong2001@gmail.com
- Slate的基础知识
- 什么是不可变数据
- 基本数据结构与API
- 如何渲染自定义组件
- 通过插件化实现自定义功能
- Slate的数据结构约束
- Void节点和Inline节点的处理
- Slate的进阶知识与源码阅读
- 深入理解Location
- DOM节点和Location是如何联系起来的？
- Slate内部对于Path的处理，什么是dirty path，以及深入理解Operation
- 实践
- 实现自定义组件可选中
- 实现工具栏功能
- 实现拖拽排版功能
- 实现列表嵌套排版
- 实现框选以及框选拖拽
- 实现YJS的应用
