自定义 菜单图标
方式一: 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