Designer自定义右键菜单，修改图标与文字

收藏

本帖最后由 Ellia.Duan 于 2023-2-27 16:12 编辑

designer提供了丰富的右键菜单功能，此时有的小伙伴们想要修改右键菜单的图标与文字，这个时候怎么办呢？可以参考下面的步骤一步一步进行。

首先，我们可以在控制台打印GC.Spread.Sheets.Designer.DefaultConfig 查看Designer右键菜单的命令，如下图所示：
image.png372790526.png

接下来，我们找到想要修改的右键菜单命令，本文以剪切功能为例，修改剪切功能的图标与文字。这里剪切功能对应的命令是ContextMenuCut
接下来通过如下代码获取此命令

var newCommand = GC.Spread.Sheets.Designer.getCommand(GC.Spread.Sheets.Designer.CommandNames.ContextMenuCut);

复制代码

在控制台打印此newCommand
image.png189642943.png

发现其图标样式为"gc-spread-cut"。对此，如果我们要修改图标，可以新增一个class样式，如

<style>
.cutIcon{
background: url("../newCutIcon.png");
}
</style>

复制代码

接下来进行替换

var newCommand = GC.Spread.Sheets.Designer.getCommand(GC.Spread.Sheets.Designer.CommandNames.ContextMenuCut);
newCommand.iconClass='cutIcon';
config.commandMap = {};
config.commandMap[GC.Spread.Sheets.Designer.CommandNames.ContextMenuCut] = newCommand ;
designer.setConfig(config)

复制代码

至此，就完成图标的替换了。

接下里，我们看下如何实现文字替换，其实有小伙伴们已经观察到在第二张图片中，打印了newCommand，发现了text属性为："${res.contextMenu.cut}" res指的是designer资源。那么我们可以获取此资源，然后修改contextMent.cut就可以了
可以通过如下代码获取designer资源