快速开始

使用 BlockNote 快速且轻松地入门。安装所需的包并将 React 组件添加到你的应用中。

安装

要使用 NPM 安装 BlockNote，请运行：

npm install @blocknote/core @blocknote/react @blocknote/mantine
npm install @mantine/core @mantine/hooks @mantine/utils

本指南使用 BlockNote UI 的 Mantine 版本，该版本开箱即用效果极佳。不过，BlockNote 提供多种 UI 库选项。请选择最适合你项目的版本：

• Mantine (@blocknote/mantine) - 推荐用于新项目
• Shadcn (@blocknote/shadcn)
• Ariakit (@blocknote/ariakit)

创建编辑器

使用 useCreateBlockNote 钩子和 BlockNoteView 组件，是开始使用 BlockNote 的最快方式：

import React from "react";
import { useCreateBlockNote } from "@blocknote/react";
// 或者，你可以使用 ariakit、shadcn 等
import { BlockNoteView } from "@blocknote/mantine";
// mantine 编辑器的默认样式
import "@blocknote/mantine/style.css";
// 包含的 Inter 字体
import "@blocknote/core/fonts/inter.css";

export default function MyEditor() {
  // 创建一个新的编辑器实例
  const editor = useCreateBlockNote();

  // 渲染编辑器
  return <BlockNoteView editor={editor} />;
}

关于 useCreateBlockNote 钩子和 BlockNoteView 组件的更多信息，请参见 React 概览。

下一步

你现在已经知道如何将 BlockNote 集成到你的 React 应用中！不过，这只是你可以用 BlockNote 做的事情的冰山一角。

• 了解 块和编辑器基础 以及如何使用 编辑器 API 进行交互
• 查看 UI 组件 以自定义内置菜单和工具栏，以及 样式与主题 来定制编辑器的外观和风格
• 通过 自定义模式 进一步扩展编辑器，或者添加 实时协作