浮动菜单扩展

在 Tiptap 中使用浮动菜单扩展，使菜单在空行上出现。

安装扩展

安装浮动菜单扩展和 Floating UI 库。

npm install @tiptap/extension-floating-menu @floating-ui/dom@^1.6.0

设置

element

包含您菜单的 DOM 元素。

类型: HTMLElement

默认值: null

options

在底层，FloatingMenu 使用 Floating UI。您可以使用这些选项控制浮动菜单的中间件和定位。

类型: Object

默认值: { strategy: 'absolute', placement: 'right' }

选项	类型	描述
`strategy`	`string`	定位策略。请参见这里
`placement`	`string`	菜单的位置。请参见这里
`offset`	`OffsetOptions` 或 `boolean`	偏移中间件选项。如果为 `true` 使用默认选项，如果为 `false` 禁用中间件
`flip`	`FlipOptions` 或 `boolean`	翻转中间件选项。如果为 `true` 使用默认选项，如果为 `false` 禁用中间件
`shift`	`ShiftOptions` 或 `boolean`	移动中间件选项。如果为 `true` 使用默认选项，如果为 `false` 禁用中间件
`arrow`	`ArrowOptions` 或 `false`	箭头中间件选项。如果为 `false` 禁用中间件
`size`	`SizeOptions` 或 `boolean`	大小中间件选项。如果为 `true` 使用默认选项，如果为 `false` 禁用中间件
`autoPlacement`	`AutoPlacementOptions` 或 `boolean`	自动放置中间件选项。如果为 `true` 使用默认选项，如果为 `false` 禁用中间件
`hide`	`HideOptions` 或 `boolean`	隐藏中间件选项。如果为 `true` 使用默认选项，如果为 `false` 禁用中间件
`inline`	`InlineOptions` 或 `boolean`	内联中间件选项。如果为 `true` 使用默认选项，如果为 `false` 禁用中间件
`onShow`	`Function` or `undefined`	A callback that is called when the menu is shown. This can be used to add custom logic or styles when the menu is displayed.
`onHide`	`Function` or `undefined`	A callback that is called when the menu is hidden. This can be used to add custom logic or styles when the menu is hidden.
`onUpdate`	`Function` or `undefined`	A callback that is called when the menu is updated. This can be used to add custom logic or styles when the menu is updated.
`onDestroy`	`Function` or `undefined`	A callback that is called when the menu is destroyed. This can be used to add custom logic or styles when the menu is removed.

pluginKey

底层 ProseMirror 插件的键。如果您添加多个实例，请确保使用不同的键。

类型: string | PluginKey

默认值: 'floatingMenu'

shouldShow

一个回调，用于控制菜单是否应显示。

类型: (props) => boolean

源代码

packages/extension-floating-menu/

在 Vanilla JavaScript 中使用

import { Editor } from '@tiptap/core'
import FloatingMenu from '@tiptap/extension-floating-menu'

new Editor({
  extensions: [
    FloatingMenu.configure({
      element: document.querySelector('.menu'),
    }),
  ],
})

其他框架

请查看此页顶部的演示 #，了解如何将浮动菜单扩展与 React 或 Vue 集成。

自定义逻辑

使用 shouldShow 选项自定义显示菜单的逻辑。对于组件，shouldShow 可以作为 prop 传递。

FloatingMenu.configure({
  shouldShow: ({ editor, view, state, oldState }) => {
    // 在任何段落中显示浮动菜单
    return editor.isActive('paragraph')
  },
})

多个菜单

通过设置唯一的 pluginKey 使用多个菜单。

import { Editor } from '@tiptap/core'
import FloatingMenu from '@tiptap/extension-floating-menu'

new Editor({
  extensions: [
    FloatingMenu.configure({
      pluginKey: 'floatingMenuOne',
      element: document.querySelector('.menu-one'),
    }),
    FloatingMenu.configure({
      pluginKey: 'floatingMenuTwo',
      element: document.querySelector('.menu-two'),
    }),
  ],
})

或者，您可以传递一个 ProseMirror PluginKey。

import { Editor } from '@tiptap/core'
import FloatingMenu from '@tiptap/extension-floating-menu'
import { PluginKey } from '@tiptap/pm/state'

new Editor({
  extensions: [
    FloatingMenu.configure({
      pluginKey: new PluginKey('floatingMenuOne'),
      element: document.querySelector('.menu-one'),
    }),
    FloatingMenu.configure({
      pluginKey: new PluginKey('floatingMenuOne'),
      element: document.querySelector('.menu-two'),
    }),
  ],
})