将工具栏 UI 组件添加到 Tiptap

Available for free

用于组织相关操作和控件，并支持键盘焦点游移的水平容器。

安装

您可以通过 Tiptap CLI 添加该原语（适用于 Vite 或 Next.js）

npx @tiptap/cli@latest add toolbar

手动集成

对于 Vite 或 Next.js 之外的框架，可以从开源库手动添加该原语。

导入样式

该组件需要您导入我们的样式，这些样式已添加到 styles/keyframe-animation.scss 和 styles/_variables.scss。

用法

import { Toolbar, ToolbarGroup, ToolbarSeparator } from '@/components/tiptap-ui-primitive/toolbar'
import { Button } from '@/components/tiptap-ui-primitive/button'
import { BoldIcon } from '@/components/tiptap-icons/bold-icon'
import { ItalicIcon } from '@/components/tiptap-icons/italic-icon'
import { Spacer } from '@/components/tiptap-ui-primitive/spacer'

export default function MyComponent() {
  return (
    <Toolbar variant="fixed">
      <ToolbarGroup>
        <Button data-style="ghost">
          <BoldIcon className="tiptap-button-icon" />
        </Button>
        <Button data-style="ghost">
          <ItalicIcon className="tiptap-button-icon" />
        </Button>
      </ToolbarGroup>

      <ToolbarSeparator />

      <ToolbarGroup>
        <Button data-style="ghost">格式</Button>
      </ToolbarGroup>

      <Spacer />

      <ToolbarGroup>
        <Button data-style="primary">保存</Button>
      </ToolbarGroup>
    </Toolbar>
  )
}

属性

名称	类型	默认值	描述
variant	'fixed' \| 'floating'	'fixed'	工具栏样式变体
data-plain	boolean	undefined	是否使用纯样式

ToolbarSeparator

名称	类型	默认值	描述
orientation	'horizontal' \| 'vertical'	'vertical'	分隔线的方向

键盘行为

工具栏遵循水平焦点游走模式。禁用的控件会被跳过，包括工具栏打开期间其禁用状态发生变化的情况。

按键	行为
`ArrowLeft`、`ArrowRight`	在启用的控件之间移动，并在任一端循环。
`Home`、`End`	移动到第一个或最后一个启用的控件。
`Enter`	激活获得焦点的控件。
`Space`	使用浏览器的标准行为激活获得焦点的原生按钮。
`Tab`、`Shift+Tab`	离开工具栏，而不是在其控件之间循环。

工具栏不会处理 Escape；拥有该工具栏的浮动元素或菜单可以处理此按键。

Previously自适应高度文本框

Next up工具提示