沧州企业网站专业定制,越秀区网站建设,建设一个网站需要哪些费用,wordpress调用站点标题接口
我们知道Slate使用纯 JSON 数据对象#xff0c;只要这些数据符合接口标准就行。也就是说每一个节点都有一个接口标准与之对应。比如文本节点#xff1a;
interface Text {text: string
}在实例这些接口数据的同时我们也可以增加额外的属性#xff0c;这根据我们的实际…接口
我们知道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 slateexport const MyElement {...Element,isImageElement,isParagraphElement,isQuoteElement,
}
