编辑器设置

您可以在实例化编辑器时自定义它。让我们仔细看看设置 BlockNote 编辑器的基本方法和组件。

创建编辑器

通过调用 useCreateBlockNote Hook 创建一个新的 BlockNoteEditor。这会实例化一个新的编辑器及其所需的状态。之后，您可以使用编辑器 API 与编辑器交互，并将其传递给 BlockNoteView 组件。

declare function useCreateBlockNote(
  options?: BlockNoteEditorOptions,
  deps?: React.DependencyList,
): BlockNoteEditor;

该 Hook 接受两个可选参数：

options： 用各种选项配置编辑器。下面列出了一些常用选项，更多选项请参见 编辑器选项。

• initialContent - 设置起始内容
• dictionary - 用于本地化的文本字符串定制。详见 本地化。
• schema - 添加自定义块和样式。详见 自定义 Schema。
• uploadFile - 处理文件上传到后端。
• pasteHandler - 处理剪贴板内容的粘贴解析。

deps： React 依赖数组，决定何时重新创建编辑器。

渲染编辑器

使用 <BlockNoteView> 组件来渲染您刚创建的 BlockNoteEditor 实例：

const editor = useCreateBlockNote();

return <BlockNoteView editor={editor} />;

<BlockNoteView> 组件有许多可用属性供您自定义编辑器。更多信息请参见 React 概览。以下是一些重要属性：

• editor：要渲染的 BlockNoteEditor 实例。
• editable：编辑器是否可编辑。
• onChange：编辑器内容（文档）变化时触发的回调。
• onSelectionChange：编辑器选区变化时触发的回调。
• theme：编辑器主题，详见 主题。