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