BubbleMenu 扩展

此扩展会使上下文菜单在文本选择附近出现。使用户能够对其文本选择应用标记。

和往常一样，标记和样式完全由您决定。

安装

npm install @tiptap/extension-bubble-menu

设置

element

包含您的菜单的 DOM 元素。

类型: HTMLElement

默认: null

updateDelay

BubbleMenu 使 update 方法去抖动，以允许气泡菜单不是在每次选择更新时进行更新。这个延迟可以以毫秒为单位来控制。 BubbleMenuPlugin 默认将有 250 毫秒的延迟。通过将延迟设置为 0 可以停用此功能，从而停用去抖动。

类型: Number

默认: undefined

resizeDelay

BubbleMenu 对气泡菜单的大小计算进行去抖，以允许气泡菜单不在每次调整大小事件时更新。这个延迟可以以毫秒为单位来控制。

类型: Number

默认: 100

options

在底层，BubbleMenu 使用 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

默认: 'bubbleMenu'

shouldShow

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

类型: (props) => boolean

源代码

packages/extension-bubble-menu/

使用扩展

JavaScript

import { Editor } from '@tiptap/core'
import BubbleMenu from '@tiptap/extension-bubble-menu'

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

其他框架

查看本页面顶部的演示，了解如何将气泡菜单扩展与 React 或 Vue 集成。

自定义逻辑

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

BubbleMenu.configure({
  shouldShow: ({ editor, view, state, oldState, from, to }) => {
    // 仅对图像和链接显示气泡菜单
    return editor.isActive('image') || editor.isActive('link')
  },
})

多个菜单

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

import { Editor } from '@tiptap/core'
import BubbleMenu from '@tiptap/extension-bubble-menu'

new Editor({
  extensions: [
    BubbleMenu.configure({
      pluginKey: 'bubbleMenuOne',
      element: document.querySelector('.menu-one'),
    }),
    BubbleMenu.configure({
      pluginKey: 'bubbleMenuTwo',
      element: document.querySelector('.menu-two'),
    }),
  ],
})

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

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

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