浅析富文本编辑器框架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())))