Slate.js框架如何应用于构建富文本编辑器？

本文不是关于Slate.js使用入门的文章，如果还不了解该框架，建议先阅读下官方的文档：Slate官网文档 关于Slate的一些特性 不同于其他编辑器类的库，Slate并不提供譬如粗体、斜体、字体色等开箱即用的功能 Slate只是提供了一套自己定义的核心数据模型，以此一些操作数据和选区相关的API 视图层的渲染和行为完全由开发者基于React定制 从顶层设计上看，Slate的架构是典型的MVC模型，由自身定义数据模型(Model)，暴露操作数据的方法(Controller)，然后交由用户使用该数据在React中做渲染(View) 虽然在实现简单的编辑器应用时这种方式显得有些繁冗，但在遇到需要对业务做较定制化的功能，如内嵌复杂表单、流程图等时，就能展现出极大的灵活性。而这类需求在使用其他编辑器的库时，经常是不可行的或者成本很高（往往要在源码层面进行改造） Slate的数据模型 Slate.js数据模型的设计非常的“类DOM”，对于拥有Web基础的开发者降低了心智负担。下面从节点(Node)和选区(Selection)的设计上说明。 type Node = Editor | Element | Text interface Editor { children: Node[] } interface Element { children: Node[] [key: string]: unknown } interface Text { text: string, [key: string]: unknown } Node作为最抽象的节点类型，包括以下三种类型： Editor 编辑器的根节点类型 Element 具有children属性，可以作为其他Node的父节点；由传入的renderElement函数做自定义渲染 Text 包含文本信息；由renderLeaf函数做自定义渲染；在添加mark时，将文本打散成不同的Leaf(这个行为是由Slate执行的，下面的例子会讲) 除了接口中定义的属性，也可以在节点中添加任意业务相关的属性值（如下面的例子）。