抠丁客 抠丁客
项目
编辑 (2024/6/19)

React 集成 tiptap

引言

本指南描述了如何将 Tiptap 与您的 React 项目集成。我们将使用 Create React App，但与其他设置的工作流程类似。

Create React App

快速入门

如果您只想快速开始使用 Tiptap，可以使用 @alb 的 Tiptap Create React App 模板，它已经完成了下面列出的所有步骤。

npx create-react-app my-tiptap-project --template tiptap

1. 创建项目（可选）

我们从一个名为 my-tiptap-project 的新 React 项目开始。Create React App 将设置我们需要的一切。

# 使用 npm 创建项目
npx create-react-app my-tiptap-project

# 改变目录
cd my-tiptap-project

2. 安装依赖

现在安装 @tiptap/react 包、@tiptap/pm（ProseMirror 库）和 @tiptap/starter-kit，它包含了快速启动时最常用的扩展。

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

如果您遵循步骤 1 和 2，现在可以用 npm run start 启动项目，并在浏览器中打开 http://localhost:3000。

3. 创建新组件

要实际开始使用 Tiptap，我们需要创建一个新的组件。我们将其命名为 Tiptap，并在 src/Tiptap.jsx 中放入以下示例代码。

// src/Tiptap.jsx
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>这是浮动菜单</FloatingMenu>
      <BubbleMenu>这是气泡菜单</BubbleMenu>
    </EditorProvider>
  );
};

export default Tiptap;

重要提示：如果您想避免使用编辑器上下文，可以始终使用 useEditor 钩子。

// src/Tiptap.jsx
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}>这是浮动菜单</FloatingMenu>
      <BubbleMenu editor={editor}>这是气泡菜单</BubbleMenu>
    </>
  );
};

export default Tiptap;

4. 添加到您的应用

最后，将 src/App.js 的内容替换为我们的新 Tiptap 组件。

import Tiptap from "./Tiptap.jsx";

const App = () => {
  return (
    <div className="App">
      <Tiptap />
    </div>
  );
};

export default App;

5. 在子组件中消费编辑器上下文

如果您使用 EditorProvider 设置 Tiptap 编辑器，现在可以从任何子组件轻松访问编辑器实例，使用 useCurrentEditor 钩子。

import { useCurrentEditor } from "@tiptap/react";

const EditorJSONPreview = () => {
  const { editor } = useCurrentEditor();

  return <pre>{JSON.stringify(editor.getJSON(), null, 2)}</pre>;
};

重要说明：如果您使用 useEditor 钩子设置编辑器，这将不会工作。

您现在应该在浏览器中看到一个基本的 Tiptap 示例。

6. 添加前或后插槽

由于 EditorContent 组件由 EditorProvider 组件渲染，我们现在无法直接定义编辑器内容的前后内容位置。为此，可以在 EditorProvider 组件上使用 slotBefore 和 slotAfter 属性。

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

7. 完整的设置（可选）

准备添加更多功能？下面是演示如何设置基本工具栏的示例。您可以根据需要对其进行定制：

https://embed.tiptap.dev/preview/Examples/Default

在本文档中