Tiptap 的 BubbleMenu 是一个浮动的菜单,通常用于在编辑器中选中文本时提供格式化选项。这个组件会在用户选择文本时显示,并可以定制为提供不同的编辑功能,如加粗、斜体、链接添加等。
1、安装
首先,确保你已经安装了 Tiptap。如果还没有安装,可以通过以下命令安装:
npm install @tiptap/core @tiptap/extension-bubble-menu
2、使用 BubbleMenu
下面是如何在 React 项目中使用 BubbleMenu
的示例:
1、导入所需模块:
import { useEditor, EditorContent } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';
import { BubbleMenu } from '@tiptap/react';
2、设置编辑器: 创建一个编辑器实例,通常在一个 React 组件中完成。
const MyEditor = () => {
const editor = useEditor({
extensions: [
StarterKit,
],
content: '<p>Hello World!</p>',
});
return editor;
};
3、添加 BubbleMenu: 在编辑器组件中加入 BubbleMenu,并定义需要显示的按钮或功能。
const MyEditor = () => {
const editor = useEditor({
extensions: [
StarterKit,
],
content: '<p>Hello World!</p>',
});
if (!editor) {
return null;
}
return (
<>
<EditorContent editor={editor} />
<BubbleMenu editor={editor} tippyOptions={{ placement: 'top' }}>
<button onClick={() => editor.chain().focus().toggleBold().run()} className={editor.isActive('bold') ? 'is-active' : ''}>
Bold
</button>
<button onClick={() => editor.chain().focus().toggleItalic().run()} className={editor.isActive('italic') ? 'is-active' : ''}>
Italic
</button>
<button onClick={() => editor.chain().focus().toggleUnderline().run()} className={editor.isActive('underline') ? 'is-active' : ''}>
Underline
</button>
</BubbleMenu>
</>
);
};
注意事项
条件渲染:确保编辑器实例 (editor) 已经创建后再渲染 BubbleMenu。
按钮激活状态:使用 editor.isActive(‘bold’) 等方法来判断当前状态,从而改变按钮的激活状态。
tippyOptions:BubbleMenu 使用 tippy.js 为底层的浮动提示库,可以传递 tippyOptions 来自定义菜单的位置和行为。