修改菜单选项的图标与文字

问题：修改右键菜单中的图标与文字

背景：

实际应用场景中，可能会遇到对右键菜单项的图标和文字进行修改需求，例如觉得默认的菜单项名称不太好想要修改的，或者图标想要做扁平化处理，不想要Excel风格的样式。

那么可以参考下面的方法，来定制右键菜单的图标与文字。

解决方案：

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

接下来，我们找到想要修改的右键菜单命令，本文以剪切功能为例，修改剪切功能的图标与文字。

这里剪切功能对应的命令是ContextMenuCut

接下来通过如下代码获取此命令：

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

在控制台打印此newCommand：

发现其图标样式为"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资源：

var resources = GC.Spread.Sheets.Designer.getResources();

在控制台上查看下此资源，可以看到此资源是中文主题下，Designer保存的各种资源：

我们打开contextMenu，找到cut：

我们想要将“剪切”两个字改为“新的剪切”，可以通过如下代码来实现：

var resources = GC.Spread.Sheets.Designer.getResources();
resources.contextMenu.cut= '新的剪切'
GC.Spread.Sheets.Designer.setResources(resources)

至此，就实现了Designer中右键菜单中图标与文字的修改。

作者: Grapecity.China | 审核：Clark.Pan | 更新时间：2023.09.04