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

相关推荐
火柴盒zhang几秒前
websheet之 编辑器
开发语言·前端·javascript·编辑器·spreadsheet·websheet
某公司摸鱼前端3 分钟前
uniapp 仿企微左边公司切换页
前端·uni-app·企业微信
WKK_6 分钟前
uniapp自定义封装tabbar
前端·javascript·小程序·uni-app
莫问alicia7 分钟前
react 常用钩子 hooks 总结
前端·javascript·react.js
Mintopia16 分钟前
图形学中的数学基础与 JavaScript 实践
前端·javascript·计算机图形学
Mintopia23 分钟前
Three.js 制作飘摇的草:从基础到进阶的全流程教学
前端·javascript·three.js
BillKu23 分钟前
Vue3父子组件数据双向同步实现方法
前端·javascript·vue.js
红尘散仙42 分钟前
七、WebGPU 基础入门——Texture 纹理
前端·rust·gpu
jaywongX43 分钟前
Base64编码原理:二进制数据与文本的转换技术
前端·javascript·vue
红尘散仙44 分钟前
八、WebGPU 基础入门——加载图像纹理
前端·rust·gpu