当前位置：首页 > news >正文

Tiptap中BubbleMenu讲解

news 2025/7/28 5:01:03

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></>);
};