tiptap 气泡菜单

此扩展会在选中文本附近显示上下文菜单，用于让用户在所选文本上应用 标记。

如常，标记和样式完全取决于您自己。

安装

npm install @tiptap/extension-bubble-menu

配置

element

包含您的菜单的 DOM 元素。

类型: HTMLElement

默认值: null

updateDelay

BubbleMenu 会将 update 方法延迟执行，以避免在每次选中文本时都更新气泡菜单。可以通过毫秒数进行控制。BubbleMenuPlugin 默认延迟时间为 250ms，若要禁用延迟，可将其设置为 0，关闭防抖功能。

类型: Number

默认值: undefined

tippyOptions

在内部，BubbleMenu 使用了 tippy.js。您可以直接传递选项给它。

类型: Object

默认值: {}

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"),
    }),
  ],
});

框架集成

访问 https://embed.tiptap.dev/preview/Extensions/BubbleMenu 以查看集成示例。

自定义逻辑

通过 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"),
    }),
  ],
});