节点数据结构
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
定义。
- 文本样式open in new window
- 文字颜色 背景色open in new window
- 段落open in new window
- 行高open in new window
- 字号 字体open in new window
- 对齐open in new window
- 缩进open in new window
- 链接open in new window
- 标题open in new window
- 引用open in new window
- 图片open in new window
- 分割线open in new window
- 代码块open in new window
- 列表open in new window
- 表格open in new window
- 视频open in new window
当前内容版权归 wangEditor 或其关联方所有,如需对内容或内容相关联开源项目进行关注与资助,请访问 wangEditor .