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

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

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


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

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

复制代码

在控制台打印此newCommand

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

1. <style>
   
2.     .cutIcon{
   
3.         background: url("../newCutIcon.png");
   
4.     }
   
5. </style>

复制代码

接下来进行替换

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

复制代码

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


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

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

复制代码

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

我们打开contextMenu，找到cut

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

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

复制代码

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

你好，表示图标可以用DOM元素嘛，自定义了一个组件来展示图标（项目要求用这个组件）

您好，观察到您发了新帖，我之后将在此贴中进行回复。
https://gcdn.grapecity.com.cn/showtopic-202488-1-1.html