工具栏配置

示例代码

new AiEditor({
    element: "#aiEditor",
    toolbarKeys: ["undo", "redo", "brush", "eraser", 
        "|", "heading", "font-family", "font-size", 
        "|", "bold", "italic", "underline", "strike", "link", "code", "subscript", "superscript", "hr", "todo", "emoji", 
        "|", "highlight", "font-color",
        "|", "align", "line-height", 
        "|", "bullet-list", "ordered-list", "indent-decrease", "indent-increase", "break", 
        "|", "image", "video", "attachment", "quote", "code-block", "table", 
        "|", "source-code", "printer", "fullscreen", "ai"
    ],
})

以上的配置为 AiEditor 工具类的默认配置，"|" 代表的是分割线，其他的含义如下：

• undo: 撤销
• redo: 重做
• brush: 格式刷
• eraser: 清除格式
• heading: 正文/标题
• font-family: 字体
• font-size: 字号
• bold: 加粗
• italic: 斜体
• underline: 下划线
• strike: 删除线
• link: 链接
• code: 行内代码
• subscript: 下标
• superscript: 上标
• hr: 分割线
• todo: 任务列表
• emoji: 表情
• highlight: 高亮
• font-color: 字体颜色
• align: 对齐
• line-height: 行高
• bullet-list: 无序列表
• ordered-list: 有序列表
• indent-decrease: 减少缩进
• indent-increase: 增加缩进
• break: 强制换行
• image: 图片
• video: 视频
• attachment: 附件
• quote: 引用
• container: 高亮块
• code-block: 代码块
• table: 表格
• source-code: 源代码
• printer: 打印
• fullscreen: 全屏
• ai: 人工智能

自定义工具栏

在 AiEditor 中，我们可以通过在 toolbarKeys 配置中进行自定义工具栏的扩展，配置示例代码如下：

new AiEditor({
    element: "#aiEditor",
    toolbarKeys: ["undo", "redo", "brush", "eraser",
        "|", "heading", "font-family", "font-size",
        "|",
        {
            icon: "<svg .....>",
            html:"<div ...>",
            onClick: (event, editor) => {
                //点击事件
            },
            tip: "鼠标移动上去的提示内容",
        },
        "printer", "fullscreen", "ai"
    ],
})

自定义工具类配置项说明：

• icon：用于菜单显示的 icon，暂时只支持 svg 配置，svg icon 建议使用 https://remixicon.com 提供的 icon，以保证和 AiEditor 的 icon 风格保持统一。
• html：自定义菜单的 html 内容，这个配置会覆盖 icon 配置，导致 icon 不生效， icon 和 html 只能配置其中一个。
• onClick：鼠标点击菜单的事件监听。
• tip：鼠标移动到菜单显示的文字提示，支持国际化配置。

tip国际化配置示例代码

new AiEditor({
    element: "#aiEditor",
    toolbarKeys: ["undo", "redo", "brush", "eraser",
        "|", "heading", "font-family", "font-size",
        "|",
        {
            icon: "<svg .....>",
            html:"<div ...>",
            onClick: (event, editor) => {
                //点击事件
            },
            tip: "myKey",
        },
        "printer", "fullscreen", "ai"
    ],
   i18n: {
        zh :{
            "myKey": "自定义国际化显示中文内容",
        },
        en:{
            "myKey": "Custom your i18n content",
        }
    }
})

工具栏分组

工具栏分组指的是可以把一部分工具，归类到一个分组里，通过点击分组的按钮，弹出菜单内容。如下图所示：

配置代码如下：

new AiEditor({
    element: "#aiEditor",
    toolbarKeys: ["undo", "redo", "brush", "eraser", 
        "|", "heading", "font-family", "font-size", 
        "|", "bold", "italic", "underline", "strike", "link", "code", "subscript", "superscript", "hr", "todo", "emoji", 
        "|", "highlight", "font-color",
        "|", "align", "line-height", 
        "|", "bullet-list", "ordered-list", "indent-decrease", "indent-increase", "break", 
        "|", "image", "video", "attachment", "quote", "code-block", "table", 
        "|", "source-code", "printer", "fullscreen", "ai",
        {
            // title:"menu group",
            // icon:`<svg.... />`,
            toolbarKeys:["undo", "redo", "brush" ]
        }
    ],
})

如上所示，通过在 toolbarKeys 配置一个 MenuGroup 对象，即可对菜单进行分组。

MenuGroup 支持的配置如下：

• title: （非必填）鼠标移动上去默认显示的内容
• icon: （非必填）分组按钮的 icon
• toolbarKeys: （必填）分组的菜单 keys

高级用法：在工具栏分组中自定义菜单

在菜单分组中，添加自定义的菜单按钮，示例代码如下：

new AiEditor({
    element: "#aiEditor",
    toolbarKeys: ["undo", "redo", "brush", "eraser", 
        "|", "heading", "font-family", "font-size", 
        "|", "bold", "italic", "underline", "strike", "link", "code", "subscript", "superscript", "hr", "todo", "emoji", 
        "|", "highlight", "font-color",
        "|", "align", "line-height", 
        "|", "bullet-list", "ordered-list", "indent-decrease", "indent-increase", "break", 
        "|", "image", "video", "attachment", "quote", "code-block", "table", 
        "|", "source-code", "printer", "fullscreen", "ai",
        {
            // title:"menu group",
            // icon:`<svg.... />`,
            toolbarKeys:["undo", "redo", "brush",
                {
                    icon: "<svg .....>",
                    html:"<div ...>",
                    onClick: (event, editor) => {
                        //点击事件
                    },
                    tip: "myKey",
                },
            ]
        }
    ],
})

其具体含义参考：#自定义工具栏