React

本指南介绍了如何将 Tiptap 集成到你的 React 项目中。我们使用 Vite 进行示例，但在其他环境中的工作流程也类似。

创建 React 项目（可选）

从一个全新的 React 项目 my-tiptap-project 开始。Vite 会帮你搭建所需的环境。

# 使用 npm 创建项目
npm create vite@latest my-tiptap-project -- --template react-ts
# 或者，使用 pnpm 创建项目
pnpm create vite@latest my-tiptap-project --template react-ts
# 或者，使用 yarn 创建项目
yarn create vite my-tiptap-project --template react-ts
# 进入项目目录
cd my-tiptap-project

安装依赖

接下来，安装 @tiptap/react（Tiptap 的 React 版本）、@tiptap/pm（ProseMirror 库）以及 @tiptap/starter-kit（包含最常见的扩展）。

npm install @tiptap/react @tiptap/pm @tiptap/starter-kit

如果你已经完成了前两个步骤，现在可以运行 npm run dev，然后在浏览器中打开 http://localhost:3000。

集成 Tiptap

要使用 Tiptap，我们需要创建一个新组件。我们将其命名为 Tiptap，并在 src/Tiptap.tsx 中添加以下代码：

// src/Tiptap.tsx
import { EditorProvider, FloatingMenu, BubbleMenu } from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit'
// 定义扩展数组
const extensions = [StarterKit]
const content = '<p>Hello World!</p>'
const Tiptap = () => {
  return (
    <EditorProvider extensions={extensions} content={content}>
      <FloatingMenu editor={null}>This is the floating menu</FloatingMenu>
      <BubbleMenu editor={null}>This is the bubble menu</BubbleMenu>
    </EditorProvider>
  )
}
export default Tiptap

重要提示：如果你想避免使用 EditorProvider 组件，可以使用 useEditor 钩子：

// src/Tiptap.tsx
import { useEditor, EditorContent, FloatingMenu, BubbleMenu } from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit'
// 定义扩展数组
const extensions = [StarterKit]
const content = '<p>Hello World!</p>'
const Tiptap = () => {
  const editor = useEditor({
    extensions,
    content,
  })
  return (
    <>
      <EditorContent editor={editor} />
      <FloatingMenu editor={editor}>This is the floating menu</FloatingMenu>
      <BubbleMenu editor={editor}>This is the bubble menu</BubbleMenu>
    </>
  )
}
export default Tiptap

将组件添加到应用

最后，替换 src/App.tsx 的内容，使用我们的 Tiptap 组件：

import Tiptap from './Tiptap'
const App = () => {
  return (
    <div className="card">
      <Tiptap />
    </div>
  )
}
export default App

在子组件中使用 Editor 上下文

如果你使用 EditorProvider 设置 Tiptap 编辑器，则可以通过 useCurrentEditor 钩子在子组件中访问编辑器实例：

import { useCurrentEditor } from '@tiptap/react'
const EditorJSONPreview = () => {
  const { editor } = useCurrentEditor()
  return <pre>{JSON.stringify(editor.getJSON(), null, 2)}</pre>
}

重要：如果你使用 useEditor 钩子初始化编辑器，则 useCurrentEditor 无法使用。

你现在应该可以在浏览器中看到一个简单的 Tiptap 编辑器示例。

添加前置或后置内容

由于 EditorContent 组件是由 EditorProvider 组件渲染的，因此你无法直接定义编辑器前后的内容。可以使用 slotBefore 和 slotAfter 进行设置：

<EditorProvider
  extensions={extensions}
  content={content}
  slotBefore={<MyEditorToolbar />}
  slotAfter={<MyEditorFooter />}
/>

传递容器属性

EditorProvider 组件支持 editorContainerProps，可用于传递编辑器容器的属性：

<EditorProvider
  extensions={extensions}
  content={content}
  editorContainerProps={{ className: 'editor-container' }}
/>

优化性能

建议访问 React 性能优化指南，以高效地集成 Tiptap 编辑器。这将帮助你在应用扩展时避免潜在的问题。