Tiptap中BubbleMenu讲解

本文主要是介绍Tiptap中BubbleMenu讲解，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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 来自定义菜单的位置和行为。

这篇关于Tiptap中BubbleMenu讲解的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---