React富文本编辑器开发(八)节点

节点,也就是Node, DOM树就是由节点组成的,leaf 是节点, element也是节点,节点贯穿始终。节点类型如下所示:

  • 文档根节点 Editor
  • 元素节点
  • 叶子节点,如文本 text
    比如下面的示例:
javascript 复制代码
const editor = {
  children: [
    {
      type: 'paragraph',
      children: [
        {
          text: 'A line of text!',
        },
      ],
    },
  ],
  // ... 其它属性
}

Slate 文档是一种嵌套和递归结构。在文档中,元素可以有子节点,所有这些子节点都可以有子节点,没有限制。嵌套和递归结构使您能够对简单行为(如用户提及和主题标签)或复杂行为(如带有标题的表格和图形)进行建模。

Editor节点

Slate中顶级节点是编辑器本身。它的接口属性如下所示:

typescript 复制代码
interface Editor {
  children: Node[]
  ...
}

Element节点

富文本编辑器的中间层是Element,其接口为:

typescript 复制代码
interface Element {
  children: Node[]
}

我们可以定义任意的自定义元素,

typescript 复制代码
const paragraph = {
  type: 'paragraph',
  children: [...],
}

const quote = {
  type: 'quote',
  children: [...],
}

const link = {
  type: 'link',
  url: 'https://example.com',
  children: [...],
}

const paragraph = {
  id: 1,
  type: 'paragraph',
  children: [...],
}

我们可以根据需要添加属性。所有的元素默认是块级元素,块级元素都是在空间上垂直分开的,互不接触。但在某些情况下,例如对于链接,您可能希望将它们设置为"内联"元素。这样,它们就与文本节点处于同一级别。我们可以通过重写 editor.isInline 函数来定义将哪些节点视为内联节点 。( 默认情况下,它始终返回 false)。

请注意,内联节点不能是父块的第一个或最后一个子节点,也不能位于子数组中的另一个内联节点旁边。

默认情况下,Slate 会自动将这些{ text: '' }子节点以空格隔开. 元素可以包含块元素,也可以包含与文本节点混合的内联元素作为子元素。但是元素不能包含一些作为块的子项和一些内联的子项。

Void节点

与块和内联类似,我们可以根据需要定义另一种特定于元素的行为: Void特性

元素默认为非 void ,这意味着其子元素可以作为文本进行编辑。但在某些情况下,例如对于图像,我们必须确保 Slate 不会将其内容视为可编辑的文本,而是一个整体的"黑盒"。

我们可以重写 editor.isVoid函数来定义哪些元素被视为 void, (默认情况下,它始终返回false )

Text节点

文本节点是树中最低级别的节点,包含文档的文本内容以及任何格式。其接口为:

typescript 复制代码
interface Text {
  text: string
}

例如,一串粗体的文本:

javascript 复制代码
const text = {
  text: 'A string of bold text',
  bold: true,
}

文本节点也可以包含任何自定的属性,比如我们自定义格式中表达粗体、斜体、代码等方式。这些自定的属性有时也称为标志(Mark).

相关推荐
Bacon几秒前
前端:从0-1实现一个脚手架
前端
Bacon2 分钟前
前端项目部署实战 nginx+docker持续集成
前端
beckyye7 分钟前
阿里云智能语音简单使用:语音识别
前端·语音识别·录音
东东23318 分钟前
前端规范工具之husky与lint-staged
前端·javascript·eslint
jump68021 分钟前
手写事件总线、事件总线可能带来的内存泄露问题
前端
岁月宁静42 分钟前
在 Vue 3.5 中优雅地集成 wangEditor,并定制“AI 工具”下拉菜单(总结/润色/翻译)
前端·javascript·vue.js
执沐1 小时前
基于HTML 使用星辰拼出爱心,并附带闪烁+流星+点击生成流星
前端·html
atwednesday1 小时前
日志处理
javascript
#做一个清醒的人1 小时前
【electron6】Web Audio + AudioWorklet PCM 实时采集噪音和模拟调试
前端·javascript·electron·pcm
拉不动的猪1 小时前
图文引用打包时的常见情景解析
前端·javascript·后端