节点数据结构

wangEditor 是基于 slate.js 为内核开发的，所以学习本文之前，要先了解 slate Node 设计open in new window 。

是什么

很多同学可能根本不知道本文要讲什么，对于这里的“节点”和“数据结构”也不知何意。
没关系，接下来通过几个问题，就可以让你快速入门。

我们通过 API 的学习，已经知道了 wangEditor 有丰富的 API 可供使用。
那么问题来了：

editor.addMark(key, value) 可以设置文本样式，如何设置删除线呢？此时 key value 该怎么写？
editor.insertNode(node) 可以插入一个节点，如何插入一个链接呢？此时 node 该怎么写？
SlateTransforms.setNodes(editor, {...}) 可以设置节点的属性，如何设置行高呢？此时 {...} 这个属性该怎么写？

通过上述问题，你大概知道了本文的目的 —— 就是告诉你，编辑器内所有内容、节点的数据结构 —— 它们都是由哪些数据构成的。

快速了解

如果想快速了解各个节点的数据结构，其实方法很简单。

创建一个编辑器，操作一下
查看 editor.children

例如，写一段文字、设置一个标题或列表，查看 editor.children 即可看到他们的数据结构

再例如，对文字设置行高，设置文本样式，查看 editor.children 即可看到他们的数据结构

各种节点的数据结构

详细的节点数据结构，可以直接查看源码中 type 定义。