tiptap 中文文档

nodes 节点

如果将编辑器document文档比喻成一棵树tree,那么nodes节点就是树中的一种内容,paragraphsheadingscode blocks都是节点.,但节点不一定是块。它们也可以与文本内联呈现,例如@mentions 扩展。

创建新节点

您可以方便地为Tiptap创建自己的Node节点,下面是创建和注册的节点所需的例子代码。

import { Node } from '@tiptap/core'

const CustomNode = Node.create({
  // Your code here
})

const editor = new Editor({
  extensions: [
    // Register your custom node with the editor.
    CustomNode,
    // … and don’t forget all other extensions.
    Document,
    Paragraph,
    Text,
    // …
  ],
})


Blockquote 引用扩展

本文讲解的Blockquote扩展够在tiptap编辑器中使用html的blockquote标签,在新行开头输入箭头,它将神奇地转换为blockquote标签。

点击访问>>

BulletList 无序序列扩展

tiptap BulletList 扩展可以在编辑器中使用符号列表,它们被呈现为 HTML的 ul 标记。

点击访问>>

CodeBlock 代码块扩展

使用 CodeBlock 代码块扩展,你可以在文档中显示源代码而不被浏览器解析,代码包裹在HTML标记的 pre 和code 标签中。

点击访问>>

CodeBlockLowlight 代码高亮

使用 CodeBlockLowlight 代码高亮扩展,你可以在文档中显示源代码而不被浏览器解析,代码包裹在HTML标记的 pre 和code 标签中,并且可以让代码高亮。

点击访问>>

Document 节点

Document 是 tiptap 编辑器的根节点,任何节点都在该节点下面,就像 html 的 body 标签。

点击访问>>

HardBreak 换行节点

HardBreak 节点功能相当于 html 里面的 br 标签。

点击访问>>

Heading 标题节点

Heading 节点功能相当于 html 里面的 h1 h2 h3 h4 h5 h6标签,承担文档的标题作用。

点击访问>>

HorizontalRule 横线节点

tiptap 的 HorizontalRule 节点扩展功能相当于 html 里面的 hr标签,将光标所在的内容用横线分隔。

点击访问>>

Image 图片扩展

tiptap Image 是用来显示图片用的扩展,默认把图片渲染为block块元素,如果你要内联模式可以把 inline 属性设置为true,内联模式就是图片和文字可以在同一行。

点击访问>>

ListItem 节点

ListItem 扩展增加了对 HTML的li标签的支持,它用于项目列表和有序列表,ListItem扩展需要BulletList或OrderedList节点。

点击访问>>

Mention 提及节点

tiptap Mention 提及节点可以实现像聊天软件的@某人一样的功能,你可以通过前端实现数据筛选也可以调用后端api返回需要的数据。

点击访问>>

OrderedList 有序列节点

tiptap OrderedList 有序列扩展渲染成功 html 的 ol 标签在每行的前面会显示数字。

点击访问>>

Paragraph 段落节点

tiptap Paragraph 扩展,把数据渲染成 html 的 p 标签,这很重要是文档的基础组成部分。

点击访问>>

Table 表格扩展

如果你想在 tiptap 编辑器设置显示表格,你可以是使用 table 扩展,它可以渲染成 html 的 table 标签,他可以合并单元格、添加删除行等等。

点击访问>>

TaskList 任务列表

tiptap TaskList 扩展可以在编辑器中使用任务列表,它们渲染成为 ul 的 data-type="taskList" 标签,它不依赖任何框架,在新行开头键入[]或[x],它将神奇地转换为任务列表。

点击访问>>

TaskItem 任务列表项

tiptap TaskItem 是 TaskList的列表项,可以呈现为选中或不选中状态。

点击访问>>

Text 节点

tiptap Text 节点是编辑器文档的必要节点,它不会渲染成如何 html 标签,纯粹是文本。

点击访问>>
Catalog
快速入门 Guide 向导 API 列表 tiptap 方法 tiptap 属性 titap 配置 commands 命令 nodes 节点 Blockquote 引用扩展 BulletList 无序序列扩展 CodeBlock 代码块扩展 CodeBlockLowlight 代码高亮 Document 节点 HardBreak 换行节点 Heading 标题节点 HorizontalRule 横线节点 Image 图片扩展 ListItem 节点 Mention 提及节点 OrderedList 有序列节点 Paragraph 段落节点 Table 表格扩展 TaskList 任务列表 TaskItem 任务列表项 Text 节点 marks 标记 extensions 扩展