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）.