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. 完整的设置(可选)
准备添加更多功能?下面是演示如何设置基本工具栏的示例。您可以根据需要对其进行定制: