节点数据结构
wangEditor 是基于 slate.js 为内核开发的,所以学习本文之前,要先了解 slate Node 设计 。
是什么
很多同学可能根本不知道本文要讲什么,对于这里的“节点”和“数据结构”也不知何意。
没关系,接下来通过几个问题,就可以让你快速入门。
我们通过 API 的学习,已经知道了 wangEditor 有丰富的 API 可供使用。
那么问题来了:
editor.addMark(key, value)
可以设置文本样式,如何设置删除线呢?此时key
value
该怎么写?editor.insertNode(node)
可以插入一个节点,如何插入一个链接呢?此时node
该怎么写?SlateTransforms.setNodes(editor, {...})
可以设置节点的属性,如何设置行高呢?此时{...}
这个属性该怎么写?
通过上述问题,你大概知道了本文的目的 —— 就是告诉你,编辑器内所有内容、节点的数据结构 —— 它们都是由哪些数据构成的。
快速了解
如果想快速了解各个节点的数据结构,其实方法很简单。
- 创建一个编辑器,操作一下
- 查看
editor.children
例如,写一段文字、设置一个标题或列表,查看 editor.children
即可看到他们的数据结构
再例如,对文字设置行高,设置文本样式,查看 editor.children
即可看到他们的数据结构
各种节点的数据结构
详细的节点数据结构,可以直接查看源码中 type
定义。