编辑器设置

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

useCreateBlockNote 钩子

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

function useCreateBlockNote(
  options?: BlockNoteEditorOptions,
  deps?: React.DependencyList = [],
): BlockNoteEditor;
 
type BlockNoteEditorOptions = {
  animations?: boolean;
  collaboration?: CollaborationOptions;
  comments?: CommentsConfig;
  defaultStyles?: boolean;
  dictionary?: Dictionary;
  disableExtensions?: string[];
  domAttributes?: Record<string, string>;
  dropCursor?: (opts: {
    editor: BlockNoteEditor;
    color?: string | false;
    width?: number;
    class?: string;
  }) => Plugin;
  heading?: {
    levels?: number[];
  };
  initialContent?: PartialBlock[];
  pasteHandler?: (context: {
    event: ClipboardEvent;
    editor: BlockNoteEditor;
    defaultPasteHandler: (context: {
      pasteBehavior?: "prefer-markdown" | "prefer-html";
    }) => boolean | undefined;
  }) => boolean | undefined;
  resolveFileUrl: (url: string) => Promise<string>;
  schema?: BlockNoteSchema;
  setIdAttribute?: boolean;
  sideMenuDetection?: "viewport" | "editor";
  tabBehavior?: "prefer-navigate-ui" | "prefer-indent";
  tables?: TableFeatures;
  trailingBlock?: boolean;
  uploadFile?: (file: File) => Promise<string>;
};

该钩子接受两个可选参数：

options: 一个包含编辑器选项的对象：

animations：是否对块的更改（如缩进、创建列表、修改标题）进行动画处理。默认值为 true。

collaboration：启用实时协作的选项。详情请参见实时协作。

comments：评论功能配置，需提供 threadStore。详情请参见评论。

defaultStyles：是否使用默认字体并重置 BlockNote 中使用的 <p>, <li>, <h1> 等元素的样式。如果未定义，默认为 true。

dictionary：用于本地化的字符串。查看本地化 / 国际化示例和自定义占位符。

disableExtensions（高级）：基于名称禁用 BlockNote 默认使用的 TipTap 扩展。

domAttributes: 一个对象，包含应添加到编辑器中各 DOM 元素的 HTML 属性。查看更多内容请见添加 DOM 属性。

dropCursor：拖放块时使用的替代指示器。使用的是 ProseMirror drop cursor (opens in a new tab)，当启用列块时使用修改版。

initialContent: 编辑器创建时应包含的内容，表示为部分块数组。

heading: 标题配置。允许您配置编辑器中应提供的标题级别数量。默认为 [1, 2, 3]。最多可配置为 6 个标题级别。

pasteHandler：可用于覆盖默认粘贴行为的函数。详情请见粘贴处理。

resolveFileUrl: 解析文件 URL 以进行显示/下载的函数。用于创建受认证的 URL 或实现自定义协议。

resolveUsers：解析评论用户信息的函数。详情请见评论。

schema：如果你想通过自定义块、样式或内联内容扩展编辑器，提供编辑器的 schema，详见自定义 Schema。

setIdAttribute：是否在块上渲染 id HTML 属性以及 data-id 属性。默认值为 false。

sideMenuDetection：确定鼠标光标位置是否锁定在编辑器边界框内，用于显示块侧边菜单和块的拖放。设置为 viewport 时，侧边菜单会显示在光标附近的最近块旁，无论光标在视口的何处。放置块时也会锁定在编辑器边界框内。否则，侧边菜单仅在光标处于编辑器边界内时显示，块只能在悬停编辑器时放置。要使用多个编辑器，必须设置为 editor。默认值为 viewport。

tabBehavior：确定按 Tab 键时是否应导航工具栏以实现键盘无障碍。设置为 "prefer-navigate-ui" 时，用户可以使用 Tab 键导航工具栏。按 Escape 键会重新聚焦编辑器，之后 Tab 则用于缩进块。"prefer-indent" 则使 Tab 始终缩进块。默认为 prefer-navigate-ui。

tables：表格功能配置，允许启用更高级的表格功能，如 splitCells、cellBackgroundColor、cellTextColor 和表头。

trailingBlock：用户可传入 false 来禁用在用户输入或编辑任意块时自动在下一行创建尾随新块的功能。如果未定义，默认为 true。

uploadFile：处理文件上传的函数，最终返回上传文件的 URL。用于图片块。

deps: 一个依赖数组，内部传递给 useMemo。仅当此数组发生变化时才会创建新的编辑器。

使用 <BlockNoteView> 渲染编辑器

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

const editor = useCreateBlockNote();
 
return <BlockNoteView editor={editor} />;

属性

你可以向 BlockNoteView 传递许多额外的属性。以下是完整列表：

export type BlockNoteViewProps = {
  editor: BlockNoteEditor;
  editable?: boolean;
  onSelectionChange?: () => void;
  onChange?: () => void;
  theme?:
    | "light"
    | "dark"
    | Theme
    | {
        light: Theme;
        dark: Theme;
      };
  formattingToolbar?: boolean;
  linkToolbar?: boolean;
  sideMenu?: boolean;
  slashMenu?: boolean;
  emojiPicker?: boolean;
  filePanel?: boolean;
  tableHandles?: boolean;
  comments?: boolean;
  children?:
} & HTMLAttributes<HTMLDivElement>;

editor：要渲染的 BlockNoteEditor 实例。

editable：编辑器是否可编辑。

onSelectionChange：当编辑器选择更改时触发的回调。

onChange：当编辑器内容（文档）更改时触发的回调。

theme：编辑器主题，详见主题。

formattingToolbar：是否启用格式化工具栏。

linkToolbar：是否启用链接工具栏。

sideMenu：是否启用块侧边菜单。

slashMenu：是否启用斜杠菜单。

emojiPicker：是否启用表情选择器。

filePanel：是否启用文件工具栏。

tableHandles：是否启用表格操作柄。

comments：是否启用默认评论 UI 功能。

children：向 BlockNoteView 传递子元素来创建或自定义工具栏、菜单或其他 UI 组件。详见UI 组件。

其它传入的属性会被转发给 BlockNote 内部渲染的 HTML div 元素。