目录

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

本文是转载文章,点击查看原文
如有侵权,请联系 xyy@jishuzhan.net 删除
相关推荐
《独白》3 分钟前
将图表和表格导出为PDF的功能
javascript·vue.js·ecmascript
CopyLower6 分钟前
提升 Web 性能:使用响应式图片优化体验
前端
南通DXZ8 分钟前
Win7下安装高版本node.js 16.3.0 以及webpack插件的构建
前端·webpack·node.js
什码情况8 分钟前
微服务集成测试 -华为OD机试真题(A卷、JavaScript)
javascript·数据结构·算法·华为od·机试
你的人类朋友1 小时前
浅谈Object.prototype.hasOwnProperty.call(a, b)
javascript·后端·node.js
Mintopia1 小时前
深入理解 Three.js 中的 Mesh:构建 3D 世界的基石
前端·javascript·three.js
打瞌睡de喵1 小时前
JavaScript 空对象检测
javascript
前端太佬1 小时前
暂时性死区(Temporal Dead Zone, TDZ)
前端·javascript·node.js
Mintopia1 小时前
Node.js 中 http.createServer API 详解
前端·javascript·node.js
艾克马斯奎普特1 小时前
Vue.js 3 渐进式实现之响应式系统——第三节:建立副作用函数与被操作字段之间的联系
javascript·vue.js