组件版设计器-单元格类型添加新项

最近有小伙伴提出这样一个需求：如下图，在 组件版设计器 工具栏 的 单元格类型中 添加新项。


一：组件版设计器 V14.2.0 之前版本 请参考下文：

我们以附件的demo为例：
首先创建一个 config.js 文件，在里面对config做出配置。创建 exportImage 命令，并将它添加到 subCommands 中。
代码如下：

1. var designerConfig = JSON.parse(JSON.stringify(GC.Spread.Sheets.Designer.DefaultConfig));
   
2. var cellType = GC.Spread.Sheets.Designer.getCommand("cellType");
   
3. cellType.subCommands.push("exportImage");
   
4. var newCommands = {
   
5.     "cellTypeNew": cellType,
   
6.     "exportImage": {
   
7.         iconClass: "ribbon-button-namemanager",
   
8.         text: "导出图片",
   
9.         commandName: "exportImage",
   
10.         execute: async function (context) {
    
11.             console.log("导出图片")
    
12.         }
    
13.     }
    
14. }
    
15. designerConfig.commandMap = {}
    
16. Object.assign(designerConfig.commandMap, newCommands);
    
17. designerConfig.ribbon[0].buttonGroups[5].commandGroup.children[0].commands[0] = "cellTypeNew";

复制代码

在html文件中引入config.js ，将designerConfig作为参数，创建一个新的designer。

1. var d = new GC.Spread.Sheets.Designer.Designer(document.getElementById("gc-designer-container"), designerConfig, undefined);

复制代码

这时我们再运行下项目，可以看到 导出图片项 已添加。




点击  导出图片 ，控制台打印 “导出图片”，命令生效。





完整代码请参考附件。


二：组件版设计器 V14.2.0 之后版本 请参考下方链接文章：https://gcdn.grapecity.com.cn/showtopic-133667-1-1.html