Designer自定义右键菜单，修改图标与文字
本帖最后由 Ellia.Duan 于 2023-2-27 16:12 编辑designer提供了丰富的右键菜单功能，此时有的小伙伴们想要修改右键菜单的图标与文字，这个时候怎么办呢？可以参考下面的步骤一步一步进行。
首先，我们可以在控制台打印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 = 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中右键菜单中图标与文字的修改。
你好，表示图标可以用DOM元素嘛，自定义了一个组件来展示图标（项目要求用这个组件） 您好，观察到您发了新帖，我之后将在此贴中进行回复。
https://gcdn.grapecity.com.cn/showtopic-202488-1-1.html
页:
[1]