自定义 菜单图标

方式一: URL图标映射表 iconUrlMap

参数名 必填 类型 说明 备注
iconUrlPath string URL图标资源所在目录 默认:”/editorRes/“,即”public/editorRes/“
iconUrlMap map<string /action/, string/iconRes/> 菜单项action与图标的对应关系

step1: 图片资源放入iconUrlPath指定的目录

step2: new ThinkEditorContextMenu时正确配置iconUrlPath、iconUrlMap

let iconUrlMap = {
  copy: "icon-copy@64.png",
  cut: "icon-cut@64.png",
  paste: "icon-paste@64.png",
  pasteText: "icon-paste-text@64.png",
};

let ctxMenu = new ThinkEditorContextMenu({
    thinkEditor: thinkEditor,
    iconUrlPath : "/editorRes/",
    iconUrlMap: iconUrlMap,
});

方式二:Symbol图标映射表 iconMap

参数名 必填 类型 说明 备注
iconMap map<string /action/, string/iconRes/> 菜单项action与图标的对应关系

step1: 引入应用自己的资源文件

<script src="https://at.alicdn.com/t/c/font_4963372_kvz21o9bhkp.js"></script>

step2: new ThinkEditorContextMenu时正确配置iconMap

step1: 引入应用自己的资源文件
<script src="https://at.alicdn.com/t/c/font_4963372_kvz21o9bhkp.js"></script>

step2: 指定菜单Item与资源文件的对应关系iconMap
let iconMap = {
  copy: "icon-copy",
  cut: "icon-cut",
  paste: "icon-paste",
  pasteText: "icon-paste-text",
};

let ctxMenu = new ThinkEditorContextMenu({
    thinkEditor: thinkEditor,
    iconMap: iconMap,
});
文档更新时间: 2025-09-06 22:01   作者:admin