tiptap Next.js 集成 tiptap

引言

本教程将指导您如何在 Next.js 项目中集成 Tiptap。

需要的条件

您的机器上已安装 Node.js
对 React 有基本了解

1. 创建项目（可选）

如果您已经有了一个现成的 Next.js 项目，也可以跳过这一步，直接进行下一步。为了演示，我们从一个名为 my-tiptap-project 的新项目开始。运行以下命令创建项目：

# 创建项目
npx create-next-app my-tiptap-project

# 更改目录
cd my-tiptap-project

2. 安装依赖项

现在我们有了标准的起始模板，可以开始安装 Tiptap 了。我们需要安装三个包：@tiptap/react、@tiptap/pm 和 @tiptap/starter-kit，它们包含了快速入门所需的全部扩展。

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

如果完成了步骤 1 和 2，现在可以通过 npm run dev 启动项目，并在浏览器中打开 http://localhost:3000/。如果你使用的是现有项目，可能会有所不同。

3. 创建新组件

要开始使用 Tiptap，需要在应用中添加一个新的组件。首先，创建一个名为 components/ 的目录。然后，在 components/ 目录下创建一个名为 Tiptap.jsx 的文件，放入以下示例代码：

// 使用浏览器模式
"use client";

import { useEditor, EditorContent } from "@tiptap/react";
import StarterKit from "@tiptap/starter-kit";

const Tiptap = () => {
  const editor = useEditor({
    extensions: [StarterKit],
    content: "<p>Hello World! 🌎️</p>", // 注释：这是一个包含 emoji 的文本
  });

  return <EditorContent editor={editor} />;
};

export default Tiptap;

4. 将组件添加到应用中

现在，我们将 pages/index.js 文件的内容替换为以下代码，以便在应用中使用我们的 Tiptap 组件：

import Tiptap from "../components/Tiptap";

export default function Home() {
  return (
    <Tiptap /> // 添加空格以保持格式清晰
  );
}

此时，你应该能在浏览器中看到 Tiptap。恭喜自己！🎉 现在可以继续探索和定制 Tiptap 了。