如果将编辑器document文档比喻成一棵树tree,那么nodes节点就是树中的一种内容,paragraphs、headings或code 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扩展够在tiptap编辑器中使用html的blockquote标签,在新行开头输入箭头,它将神奇地转换为blockquote标签。
点击访问>>tiptap BulletList 扩展可以在编辑器中使用符号列表,它们被呈现为 HTML的 ul 标记。
点击访问>>使用 CodeBlock 代码块扩展,你可以在文档中显示源代码而不被浏览器解析,代码包裹在HTML标记的 pre 和code 标签中。
点击访问>>使用 CodeBlockLowlight 代码高亮扩展,你可以在文档中显示源代码而不被浏览器解析,代码包裹在HTML标记的 pre 和code 标签中,并且可以让代码高亮。
点击访问>>Document 是 tiptap 编辑器的根节点,任何节点都在该节点下面,就像 html 的 body 标签。
点击访问>>HardBreak 节点功能相当于 html 里面的 br 标签。
点击访问>>Heading 节点功能相当于 html 里面的 h1 h2 h3 h4 h5 h6标签,承担文档的标题作用。
点击访问>>tiptap 的 HorizontalRule 节点扩展功能相当于 html 里面的 hr标签,将光标所在的内容用横线分隔。
点击访问>>tiptap Image 是用来显示图片用的扩展,默认把图片渲染为block块元素,如果你要内联模式可以把 inline 属性设置为true,内联模式就是图片和文字可以在同一行。
点击访问>>ListItem 扩展增加了对 HTML的li标签的支持,它用于项目列表和有序列表,ListItem扩展需要BulletList或OrderedList节点。
点击访问>>tiptap Mention 提及节点可以实现像聊天软件的@某人一样的功能,你可以通过前端实现数据筛选也可以调用后端api返回需要的数据。
点击访问>>tiptap OrderedList 有序列扩展渲染成功 html 的 ol 标签在每行的前面会显示数字。
点击访问>>tiptap Paragraph 扩展,把数据渲染成 html 的 p 标签,这很重要是文档的基础组成部分。
点击访问>>如果你想在 tiptap 编辑器设置显示表格,你可以是使用 table 扩展,它可以渲染成 html 的 table 标签,他可以合并单元格、添加删除行等等。
点击访问>>tiptap TaskList 扩展可以在编辑器中使用任务列表,它们渲染成为 ul 的 data-type="taskList" 标签,它不依赖任何框架,在新行开头键入[]或[x],它将神奇地转换为任务列表。
点击访问>>tiptap TaskItem 是 TaskList的列表项,可以呈现为选中或不选中状态。
点击访问>>tiptap Text 节点是编辑器文档的必要节点,它不会渲染成如何 html 标签,纯粹是文本。
点击访问>>