格式化工具栏

在桌面设备上，格式化工具栏会出现在高亮文本的上方或下方。在触摸设备上打开屏幕键盘时，它会显示在键盘上方。

更改格式化工具栏

您可以用自己的 React 组件更改或替换格式化工具栏。以下示例演示了如何在默认格式化工具栏中添加两个按钮——一个用于添加蓝色文本/背景，另一个用于切换代码样式。

我们首先定义自定义的 BlueButton。useComponentsContext 钩子获取 BlockNote 内部使用的所有组件，因此我们想使用 Components.FormattingToolbar.Button。

我们使用 FormattingToolbar 组件创建自定义格式化工具栏。通过指定其子元素，我们可以用自己的按钮替换工具栏中的默认按钮。

这个自定义格式化工具栏被传递给一个 FormattingToolbarController，它控制工具栏的位置和可见性，并自动在桌面和移动布局之间切换。自定义工具栏会用于两种布局。

在 BlockNoteView 上设置 formattingToolbar={false} 告诉 BlockNote 不显示默认的格式化工具栏。

更改块类型选择（下拉菜单）项

默认格式化工具栏中的第一个元素是块类型选择，您可以更改其中的项。示例通过向其添加一个项目，使块类型选择支持图像块。

这里，我们使用了 FormattingToolbar 组件，但保留了默认按钮（没有传递任何子元素）。相反，我们通过 blockTypeSelectItems 属性传入了自定义的块类型选择项。

移动端格式化工具栏

在触摸设备上，当屏幕键盘打开且编辑器获得焦点时，BlockNote 会将移动端格式化工具栏显示在屏幕键盘上方，而不是让它围绕选中的内容浮动。它包含与常规格式化工具栏相同的项目，并且默认启用，无需额外设置。在手机上打开上面的任一示例即可查看效果。

浏览器限制

移动浏览器处理屏幕键盘的方式各不相同，这可能会影响工具栏。本文假设你的页面已经按照移动端兼容性指南添加了 viewport meta 标签；如果尚未添加，请先完成添加。

尤其是 iOS 不支持上述 viewport meta 标签，这可能导致滚动时出现抖动或延迟。

解决方法是将应用的所有内容包裹在一个带有 bn-scroll-container 类的元素中：

<div className="bn-scroll-container">{/* nav, editor, page content... */}</div>

我们建议将此元素直接放置在 <body> 内，并包裹页面的所有内容。BlockNote 会使其尺寸与视觉视口保持同步，并在其外部渲染格式化工具栏，从而消除抖动或延迟。

独立的移动端格式化工具栏示例支持在文档滚动和固定滚动容器之间切换，以便比较它们的行为。