React富文本编辑器开发（七）接口与辅助函数

接口

我们知道Slate使用纯 JSON 数据对象，只要这些数据符合接口标准就行。也就是说每一个节点都有一个接口标准与之对应。比如文本节点：

interface Text {text: string
}

在实例这些接口数据的同时我们也可以增加额外的属性，这根据我们的实际设计需求而定。增加的属性不会妨碍Slate的解析。比如，Element节点的接口标准是下面这样的：

interface Element {children: Node[]
}

针对这样一个宽松的接口，我们施展的空间就很大了。比如 ：

const paragraph = {type: 'paragraph',children: [...],
}const link = {type: 'link',url: 'https://example.com',children: [...]
}

上面的代码中，我们增加了 type属性，在 link中还增加了url属性，根据link的数据定义，我们就能够很容易的渲染成下面的元素：

<a href={element.url}>{element.children}</a>

辅助工具

Slate 中提供了很多的辅助函数，这大大方便了我们的使用。比如下面，在使用节点的过程中我们可能需要用到：

import { Node } from 'slate'// 获取元素节点内的字符内容
const string = Node.string(element)// 在一个根节点中获取指定位置的节点
const descendant = Node.get(value, path)

在使用范围时可能会用到下面的工具：

import { Range } from 'slate'// 按顺序获取选择范围的起点和终点
const [start, end] = Range.edges(range)// 检查一个选择范围是否被折叠。即一个光杆插入点，没有选择内容，起点和终点在一起。
if (Range.isCollapsed(range)) {// ...
}

所以，在正式开发之前先了解一下相关的辅助工具是很有必要的。

自定义辅助工具

除了使用Slate提供的这辅助工具外，我们当然也可以自定义一些工具，比如下面这个判断一个元素是否是图像元素的工具：

const isImageElement = element => {return element.type === 'image' && typeof element.url === 'string'
}

然后把它们绑定的系统命名空间中去，以后使用就相当的方便了

import { Element } from 'slate'export const MyElement = {...Element,isImageElement,isParagraphElement,isQuoteElement,
}