浅析富文本编辑器框架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执行的，下面的例子会讲)
除了接口中定义的属性，也可以在节点中添加任意业务相关的属性值（如下面的例子）。
一个基础的使用示例如下：
const RichText = (props: any) => {
// 创建Editor
const editor = createEditor()
// 初始值
const [value, setValue] = useState([{
type: 'paragraph',
children: [{ text: "" }]
}])
// 自定义Element渲染
const renderElement = (props) => {
const { attributes, children, element } = props
switch (element.type) { // 根据Element中的type属性判断节点类型
case "heading-one":
return <h1 {...attributes}>{children}</h1>;
case "heading-two":
return <h2 {...attributes}>{children}</h2>;
case "paragraph":
return <p {...attributes}>{children}</p>;
}
}
// 自定义Leaf渲染
const renderLeaf = (props) => {
const { attributes, children, leaf } = props
// 根据Text中的自定义属性判断样式类型
if (leaf['background-color']) {
children = <span style={{ backgroundColor: leaf['background-color']}}>
{children}
</span>
}
if (leaf['font-color']) {
children = <span style={{ color: leaf['font-color']}}>
{children}
</span>
}
return <span {...attributes}>{children}</span>;
}
return <Slate editor={editor} value={value} onChange={(value) => setValue(value)}>
<Editable
renderElement={renderElement}
renderLeaf={renderLeaf}/>
</Slate>
}
假如我们在该编辑器中输入了两行文字，并选取一段文本添加颜色样式：
则上图的文本内容所对应的数据结构：
[
{
type: "paragraph",
children: [
{
text: "著名武术泰斗马保国。"
}
]
},
{
type: "paragraph",
children: [
{
text: "著名"
},
{
text: "篮球运动员",
'font-size': "rgba(139, 87, 42, 1)"
},
{
text: "蔡徐坤"
}
]
}
]
该数组中最顶层的对象映射了Element元素(由renderElement渲染的)，在其中的type字段中设为paragraph标志为默认的块级元素（当然也可以设为其他任何值，Slate.js并不关心type字段的含义）。下一层的叶子节点对象，包含了text字段，表示文本内容；也可能含有自定义的一些marks，例如上面的'font-size'，用来在renderLeaf中依据marks来实现自定义的样式渲染。
接下来再选取一段文字赋予一个背景色：
添加背景色的选区是在上面带有font-size的Text节点中的，因此会被打散成三个Text，变为如下形式：
[
{
type: "paragraph",
children: [
{
text: "著名武术泰斗马保国。"
}
]
},
{
type: "paragraph",
children: [
{
text: "著名"
},
{
text: "篮球",
'font-size': "rgba(139, 87, 42, 1)"
},
{
text: "运动",
'font-size': "rgba(139, 87, 42, 1)",
'background-color': "rgba(80, 227, 194, 1)"
},
{
text: "员",
'font-size': "rgba(139, 87, 42, 1)"
},
{
text: "蔡徐坤"
}
]
}
]
光标和选区
光标的定位由一个 Path 和 offset 确定，Path 代表节点在文档中的位置，offset 则代表在节点中的偏移量：
declare type Path = number[]
interface Point {
path: Path,
offset: number
}
Paht 是一个number类型数组，包含的数值代表着从文档数据模型的根部到光标所在Text节点的路径；offset 表示光标在Text节点上的偏移量。
如图中框中的节点所对应的Path就是[1, 0]
选取的接口定义 Range 与原生selection的属性非常相似：
interface Range {
anchor: Point,
focus: Point
}
锚点anchor代表选区的起始点，焦点focus代表选区的结束点；两者都为上述的Point类型。
插件机制
Slate提供了插件的机制允许我们覆盖编辑器原有的行为。除了直接使用slate-react和slate-history这些官方的插件，也可以自定义插件来对Slate编辑器进行拓展，而且实现方式非常简易：提供一个函数，该函数接收一个编辑器的实例editor对象，在其中重写实例对象上的方法，并返回editor实例。
下面是个例子，加入在实现业务时有这么一个场景，需要在文本域中插入一些自定义的控件如按钮、下拉框等，并且都不可被编辑；而默认情况下在文本域中所有的dom元素都是contenteditable=true的状态，是能够被光标聚焦和编辑的。为了改变这种行为，可以自行实现一个插件：
import { createEditor } from "slate"
import { withReact } from "slate-react"
import { withHistory } from "slate-history"
const myCustomeEditor = (editor) => {
const { isVoid } = editor // editor原有的isVoid方法, 用以判断节点是否可编辑
editor.isVoid = (element) => { // 根据自定义的type字段将元素置为 不可编辑的
return element.type === 'custome-element' ? true : isVoid(element)
}
return editor
}
// 创建了一个带有三个插件组合的Slate编辑器
const eidotr = myCustomeEditor(withHistory(withReact(createEditor())))