tiptap中文文档(配置)

入门指南

配置

介绍

在初始化新编辑器时，可以控制一些事情。在大多数情况下，只需说明应在何处呈现tiptap（元素）、要启用哪些功能（扩展）以及初始文档应是什么（内容）。不过，还可以配置一些功能。让我们看一个完全配置的编辑器示例。

编辑器配置

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,
})
复制代码

初始化：

• 绑定HTML元素
• 加载扩展，如Document、Paragraph、Text
• 初始化content
• 初始化之后光标聚焦设置
• 使文本可编辑(默认可编辑),禁用默认的CSS加载

节点、标记和扩展

大多数功能都打包到节点、标记和扩展中。导入所需内容并将它们作为数组传递给编辑器，就可以开始了。以下是只有三个扩展名的最小设置：

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,
  ],
})
复制代码

扩展配置

大多数扩展都可以配置。添加一个configure方法将对象传递给它。以下示例将禁用默认的标题级别4、5和6：

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

new Editor({
  element: document.querySelector('.element'),
  extensions: [
    Document,
    Paragraph,
    Text,
    Heading.configure({
      levels: [1, 2, 3],
    }),
  ],
})
复制代码

默认扩展

我们已经组合了一些最常见的扩展，并提供了一个StarterKit扩展来加载它们。下面是如何使用它：

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],
    },
  }),
})
复制代码

StarterKit扩展包含扩展列表。如果要加载它们并添加一些自定义扩展，可以这样编写：

import StarterKit from '@tiptap/starter-kit'
import Strike from '@tiptap/extension-strike'

new Editor({
  extensions: [
    StarterKit,
    Strike,
  ],
})
复制代码

过滤特定扩展

import StarterKit from '@tiptap/starter-kit'

new Editor({
  extensions: [
    StarterKit.configure({
      history: false,
    }),
  ],
})
复制代码

您可能会在协作编辑示例中看到类似的内容。协作有自己的历史扩展，您需要删除默认的历史扩展以避免冲突。

创建菜单

菜单

编辑器提供了一个流畅的API来触发命令和添加活动状态。你可以使用任何你喜欢的标记。为了使行菜单的定位更容易，我们提供了一些实用程序和组件。让我们逐一介绍最典型的用例。

固定菜单

一个固定的菜单，例如在编辑器的顶部，可以是任何东西。我们不提供这样的菜单。只需添加一个<div>和几个<button>。下面将解释这些按钮如何触发命令。

气泡菜单

选择文本时出现气泡菜单。标记和样式完全由您决定。