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