浮动菜单

浮动菜单指的是当用户选择一段文字时，弹出的 UI 菜单，如下图所示：

菜单配置

在 AIEditor 中，我们可以通过 textSelectionBubbleMenu 来配置浮动菜单，示例代码如下：

typescript

new AiEditor({
    element: "#aiEditor",
    placeholder: "点击输入内容...",
    content: 'AiEditor 是一个面向 AI 的开源富文本编辑器。 ',
    textSelectionBubbleMenu: {
        enable: true,
        items: ["ai", "Bold", "Italic", "Underline", "Strike", "code", "comment"],
    },
})

enable：是否启用
items：浮动菜单的菜单项（配置不区分大小写）

注意：以上 items 的 "comment" 的配置，只有 Pro 版本支持（开源版暂不支持）。

自定义浮动菜单

可以通过以上 items，只需要传入一个 BubbleMenuItem 配置即可，示例代码如下：

new AiEditor({
    element: "#aiEditor",
    placeholder: "点击输入内容...",
    content: 'AiEditor 是一个面向 AI 的开源富文本编辑器。 ',
    textSelectionBubbleMenu: {
        enable: true,
        items: ["ai", "Bold", "Italic", {
            id: "visit",
            title: "visit-link",
            icon: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M10 6V8H5V19H16V14H18V20C18 20.5523 17.5523 21 17 21H4C3.44772 21 3 20.5523 3 20V7C3 6.44772 3.44772 6 4 6H10ZM21 3V11H19L18.9999 6.413L11.2071 14.2071L9.79289 12.7929L17.5849 5H13V3H21Z\"></path></svg>",
            onClick: (editor) => {
                window.open("https://aieditor.dev", "_blank")
            }
        }],
    },
})

BubbleMenuItem 配置说明：

id: 当前菜单项的 ID，全局唯一，
title: 当鼠标移动上去显示的标题，支持国际化配置。国际化配置参考国际化章节。
icon: 菜单项的 icon 或者 html 内容。 icon 建议使用 https://remixicon.com 下的图标，已和 AIEditor 保持一致。
onClick: 监听点击事件

浮动菜单 ​

菜单配置 ​

自定义浮动菜单 ​

浮动菜单

菜单配置

自定义浮动菜单