Next.js

运行 init 命令以创建一个新的 Next.js 项目或设置现有项目：

npx @tiptap/cli@latest init

在 Next.js 项目和 Monorepo 之间进行选择。

当提示以下内容时：

Would you like to add a template or UI components to your project?

如果你想包含可复用的 Tiptap UI 组件，请选择 UI Components。或者，选择 Template 来搭建一个完整的示例项目。

仅添加样式

如果你在设置期间添加了模板或 UI 组件，则可以跳过本节并直接继续到 Add Styles。

新项目仍然显示默认的 Next.js 页面

init 会搭建一个标准的 Next.js 应用，并将你选择的组件作为源代码复制到你的 components/ 文件夹中——但它不会修改 app/page.tsx。在你自己在那里渲染一个 Tiptap 组件之前，npm run dev 显示的仍然是 Next.js 默认的起始页面。这是预期行为，不是安装出错。

渲染编辑器

打开 app/page.tsx 并渲染你安装的模板或组件。例如，如果你在 init 期间添加了 Simple Editor 模板：

import { SimpleEditor } from '@/components/tiptap-templates/simple/simple-editor'

export default function Page() {
  return <SimpleEditor />
}

启动开发服务器并打开页面以查看你的编辑器：

npm run dev

添加 Tiptap 组件

使用 CLI 安装 Tiptap UI 组件。例如，要添加 HeadingButton 组件：

npx @tiptap/cli@latest add heading-button

上面的命令会安装 HeadingButton 组件及其依赖项。然后你就可以在你的 Tiptap 项目中导入并使用它：

import { HeadingButton } from '@/components/ui/heading-button'

export default function App() {
  // Tiptap ...

  return (
    <>
      <HeadingButton level={1}>标题 1</HeadingButton>
      <HeadingButton level={2}>标题 2</HeadingButton>
      <HeadingButton level={3}>标题 3</HeadingButton>
    </>
  )
}

添加样式

样式会自动添加

当你安装第一个 Tiptap UI 组件时，CLI 会自动将所需的 .scss 导入添加到你的主样式表中。在大多数情况下，无需手动设置。

在继续之前，请确保你的项目包含 CSS reset。如果你正在使用 Tailwind CSS，你已经有了。

样式的导入位置

CLI 会自动将样式导入注入到你的全局样式表中，例如：

app/globals.css
src/app/globals.css

如果你自定义了入口文件，请确保其中包含以下内容：

文件： app/globals.css 或 src/app/globals.css（取决于你的项目）

@import '<path-to-styles>/_variables.scss';
@import '<path-to-styles>/_keyframe-animations.scss';

在样式设置指南中了解更多有关配置样式的信息。

Previously概述

Next upVite