tiptap 浮动菜单

此扩展程序将在空行中显示一个菜单。

安装

npm install @tiptap/extension-floating-menu

配置选项

element

包含你的菜单的 DOM 元素。

类型：HTMLElement

默认值：null

tippyOptions

在内部，FloatingMenu 使用了 tippy.js。你可以直接传递选项给它。

类型：Object

默认值：{}

pluginKey

底层 ProseMirror 插件的键。如果你添加多个实例，请确保使用不同的键。

类型：string | PluginKey

默认值：'floatingMenu'

shouldShow

一个回调函数，用于控制是否显示菜单。

类型：(props) => boolean

源代码

packages/extension-floating-menu/

使用原生 JavaScript

import { Editor } from "@tiptap/core";
import FloatingMenu from "@tiptap/extension-floating-menu";

new Editor({
  extensions: [
    FloatingMenu.configure({
      element: document.querySelector(".menu"),
    }),
  ],
});

使用框架

查看在线演示：https://embed.tiptap.dev/preview/Extensions/FloatingMenu

自定义逻辑

使用 shouldShow 选项自定义显示菜单的逻辑。对于组件，shouldShow 可以作为 prop 传递。

FloatingMenu.configure({
  shouldShow: ({ editor, view, state, oldState }) => {
    // 在任何段落中显示浮动菜单
    return editor.isActive("paragraph");
  },
});

多个菜单

通过设置唯一的 pluginKey 来使用多个菜单。

import { Editor } from "@tiptap/core";
import FloatingMenu from "@tiptap/extension-floating-menu";

new Editor({
  extensions: [
    FloatingMenu.configure({
      pluginKey: "floatingMenuOne",
      element: document.querySelector(".menu-one"),
    }),
    FloatingMenu.configure({
      pluginKey: "floatingMenuTwo",
      element: document.querySelector(".menu-two"),
    }),
  ],
});

或者，你可以传递一个 ProseMirror 的 PluginKey。

import { Editor } from "@tiptap/core";
import FloatingMenu from "@tiptap/extension-floating-menu";
import { PluginKey } from "@tiptap/pm/state";

new Editor({
  extensions: [
    FloatingMenu.configure({
      pluginKey: new PluginKey("floatingMenuOne"),
      element: document.querySelector(".menu-one"),
    }),
    FloatingMenu.configure({
      pluginKey: new PluginKey("floatingMenuTwo"),
      element: document.querySelector(".menu-two"),
    }),
  ],
});