快速开始
使用 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 库选项。请选择最适合你项目的版本：
创建编辑器
使用 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 概览。
Next.js 使用指南（或其他服务端 React 框架）
你是否使用 Next.js（create-next-app）？由于 BlockNote 是客户端组件，请确保禁用 BlockNote 的服务端渲染。请阅读我们的 Next.js + BlockNote 配置指南
移动端兼容性
在触摸设备上，BlockNote 的 UI 会自动适配：具体来说，格式化工具栏会移动到屏幕键盘上方。 为了确保工具栏相对于屏幕键盘平稳定位，你仍然需要在应用中做两件事：
首先，我们建议将 interactive-widget=resizes-content 添加到页面的 viewport meta 标签中：
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content"
/>这并非 BlockNote 特有的设置：它会告诉浏览器在键盘上方的空间中布局页面，而不是将部分页面留在键盘后面。这样 BlockNote 就能可靠地将工具栏定位在那里，不会发生抖动。
其次，iOS 不支持该标签，因此在 iOS 上滚动仍可能感觉卡顿。我们建议使用滚动容器布局来解决此问题。
下一步
你现在已经知道如何将 BlockNote 集成到你的 React 应用中！不过，这只是你可以用 BlockNote 做的事情的冰山一角。