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

相关推荐
腾讯TNTWeb前端团队44 分钟前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰4 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪4 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪4 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy5 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom6 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom6 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom6 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom6 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom6 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试