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

时间:2024-03-06 14:07:40

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

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

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

Editor节点

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

interface Editor {
  children: Node[]
  ...
}

Element节点

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

interface Element {
  children: Node[]
}

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

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节点

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

interface Text {
  text: string
}

例如,一串粗体的文本:

const text = {
  text: 'A string of bold text',
  bold: true,
}

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