需求
把右键菜单中格式整理去掉，增加导出功能，
分析源码
- instance.register.contextMenuList 更改右键菜单。
// 9. 右键菜单注册
instance.register.contextMenuList([
。。。
// {
// name: "格式整理",
// icon: "word-tool",
// when: (payload) => {
// return !payload.isReadonly;
// },
// callback: (command: Command) => {
// command.executeWordTool();
// },
// },
{
name: "导出",
icon: "word-tool",
when: (payload) => {
return !payload.isReadonly;
},
callback: (command: Command) => {
console.log(`导出操作启动了，待完善`);
},
},
]);
- 右键菜单的icon
1 src/views/CanvasEditor/main.ts文件中配置 为 icon: "word-tool",
2 实际使用的是 src/views/CanvasEditor/style.css文件中
.ce-contextmenu-word-tool {
background-image: url("./assets/images/word-tool.svg");
}
3 实际icon文件存储位置为 src/views/CanvasEditor/assets/images/word-tool.svg
- 阿里巴巴矢量网站下载导出的icon,格式svg
- 下载重新命名 word-export.svg，然后 添加相应的样式格式
.ce-contextmenu-word-export {
background-image: url("./assets/images/word-export.svg");
}
- 在代码中绑定样式
{
name: "导出",
icon: "word-export",
when: (payload) => {
return !payload.isReadonly;
},
callback: (command: Command) => {
console.log(`导出操作启动了，待完善`);
},
},
- 到此，右键菜单就添加完了。 接下来可以添加相应的处理函数了。
