tiptap 中文文档

Tiptap 编辑器 Configuration 配置

Tiptap 编辑器的配置相关的知识,包含了如何初始化、扩展的配置及使用方法等,我们也将配合在线例子进行说明。
本文含盖的知识点:Nodes 节点, marks 标记 and extensions 扩展

配置编辑器

通过 new Editor 对象来配置编辑器,Editor 的详细使用方法请查看左边的菜单导航

import { Editor } from '@tiptap/core'
import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'

new Editor({
  element: document.querySelector('.element'),
  extensions: [
    Document,
    Paragraph,
    Text,
  ],
  content: '<p>Example Text</p>',
  autofocus: true,
  editable: true,
  injectCSS: false,
})

上面的代码执行了以下操作

节点、标记、扩展

Nodes 节点 如果把文档视为树,那么节点只是该树中的一种内容类型,例如段落、标题或图片节点等。但是节点不一定是块。它也可以与文本内联呈现,例如@mentions(提及功能就是我们平时聊天邮件中的@功能)
Marks 标记 可将一个或多个标记应用于Nodes节点,例如文字的添加粗体和高亮等。
Extensions 扩展 默一类功能的集合

默认扩展

import StarterKit from '@tiptap/starter-kit'

new Editor({
  extensions: [
    StarterKit,
  ],
})

配置默认扩展

import StarterKit from '@tiptap/starter-kit'

new Editor({
  extensions: StarterKit.configure({
    heading: {
      levels: [1, 2, 3],
    },
  }),
})

禁用默认扩展里面的某个扩展

import StarterKit from '@tiptap/starter-kit'

new Editor({
  extensions: [
    StarterKit.configure({
      history: false, //设置成flase
    }),
  ],
})
Catalog
快速入门 Guide 向导 configuration 配置 prosemirror api menus 菜单 styling 样式 output 输出格式 collaborative 实时协作 extensions 自定义扩展 API 列表