节点数据结构

wangEditor 是基于 slate.js 为内核开发的,所以学习本文之前,要先了解 slate Node 设计节点数据结构 - 图1open in new window

是什么

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

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

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

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

快速了解

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

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

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

节点数据结构 - 图2

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

节点数据结构 - 图3

各种节点的数据结构

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