🚀 BlockNote AI is here! Access the early preview.
BlockNote Docs/React/UI 组件/链接工具栏

Link Toolbar

当你在编辑器中悬停链接时,链接工具栏会出现。

TODO 图片

更改链接工具栏

你可以用你自己的 React 组件更改或替换链接工具栏。在下面的演示中,默认的链接工具栏中添加了一个按钮,点击该按钮会弹出浏览器提示框。

我们首先定义自定义的 AlertButtonuseComponentsContext 钩子获取 BlockNote 内部使用的所有组件,因此我们这里使用 Components.LinkToolbar.Button

我们使用 LinkToolbar 组件创建自定义链接工具栏。通过指定其子元素,我们可以用自己的按钮替换工具栏中的默认按钮。

这个自定义链接工具栏被传递给 LinkToolbarController,该控制器控制其位置和可见性(悬停链接的上方或下方)。

BlockNoteView 上设置 linkToolbar={false} 告诉 BlockNote 不显示默认的链接工具栏。