快速开始
使用 BlockNote 快速且轻松地入门。安装所需的包并将 React 组件添加到您的应用中。
使用 NPM 安装
要通过 NPM (opens in a new tab) 安装 BlockNote，请运行：
npm install @blocknote/core @blocknote/react @blocknote/mantine创建编辑器
使用 useCreateBlockNote 钩子，我们可以创建一个新的编辑器实例，然后使用 BlockNoteView 组件进行渲染。见下方示例：
import "@blocknote/core/fonts/inter.css";
import { BlockNoteView } from "@blocknote/mantine";
import "@blocknote/mantine/style.css";
import { useCreateBlockNote } from "@blocknote/react";
export default function App() {
// Creates a new editor instance.
const editor = useCreateBlockNote();
// Renders the editor instance using a React component.
return <BlockNoteView editor={editor} />;
}
我们还导入 @blocknote/mantine/style.css，为编辑器添加默认样式以及 BlockNote 提供的 Inter 字体（可选）。
Next.js 使用（或其他服务端 React 框架）
如果您正在使用 Next.js（例如通过 create-next-app 创建的项目），因为 BlockNote 仅是客户端组件，请确保禁用 BlockNote 的服务端渲染。阅读我们关于设置 Next.js 与 BlockNote 的指南
不使用 React 也能使用 BlockNote
也可以不使用 React，使用“原生”JavaScript 或其他框架来使用 BlockNote。阅读我们关于不使用 React 而使用 BlockNote 的指南
接下来
现在您已经知道如何将 BlockNote 集成到您的 React 应用中！不过，这只是 BlockNote 功能的冰山一角。