新建工具栏按钮

需求：如何在在线表格编辑器中自定义工具栏按钮

背景：

在在线表格编辑器中，除了使用默认的菜单按钮外，想要自己添加一些自定义工具栏按钮

解决方案：

SpreadJS 新的组件版设计器采用了全新可配置设计，任何区域都采取json config 的配置方式。

通过修改默认的GC.Spread.Sheets.Designer.DefaultConfig，可以达到自定制功能

操作步骤：

1. 增加新Ribbon 选项卡

在浏览器Console中输入GC.Spread.Sheets.Designer.DefaultConfig即可查看默认ribbon选项卡配置

参考默认配置，自定义操作选项卡

var designerConfig = JSON.parse(
  JSON.stringify(GC.Spread.Sheets.Designer.DefaultConfig)
);

var customerRibbon = {
  id: "operate",
  text: "操作",
  buttonGroups: [],
};
designerConfig.ribbon.push(customerRibbon);
var designer = new GC.Spread.Sheets.Designer.Designer(
  document.getElementById("ssDesigner") /**designer host */,
  designerConfig, // designerConfigJson /**If you want to change Designer's layout or rewrite it, you can pass in your own Config JSON */ ,
  undefined /**If you want to use the spread you already created instead of generating a new spread, pass in */
);

2. 自定义button

在定义按钮之前，需要先定义按钮点击时的命令Commands，并将命令注册到config的commandMap属性上

var ribbonFileCommands = {
  getTemplates: {
    iconClass: "ribbon-button-download",
    text: "加载",
    commandName: "getTemplates",
    execute: getTemplates,
  },

  uploadFile: {
    iconClass: "ribbon-button-upload",
    text: "上传",
    commandName: "uploadFile",
    execute: uploadFile,
  },
};

上面代码注册了getTemplates和uploadFile两个命令，

其中execute对应的时具体执行内容的function

iconClass为按钮样式，可以制定按钮图片

text为显示文字

commandName为命令名称，需要全局唯一

iconClass示例：

.ribbon-button-download {
    background-image: url(图片地址，可以是base64 svg)
}

async function getTemplates(designer) {
  var spread = designer.getWorkbook(); //使用getWorkbook获取Spread对象并操作
}
async function uploadFile(designer) {
  var spread = designer.getWorkbook(); //使用getWorkbook获取Spread对象并操作
}

有了命令就可以添加对应button 的config了

var ribbonFileConfig = {
  label: "文件操作",
  thumbnailClass: "ribbon-thumbnail-spreadsettings",
  commandGroup: {
    children: [
      {
        direction: "vertical",
        commands: ["getTemplates", "uploadFile"],
      },
      {
        type: "separator",
      },
    ],
  },
};

在designer的config中加入自定义的命令和按钮

designerConfig.commandMap = {};
Object.assign(designerConfig.commandMap, ribbonFileCommands);
customerRibbon.buttonGroups.push(ribbonFileConfig);
designerConfig.ribbon.push(customerRibbon);
var designer = new GC.Spread.Sheets.Designer.Designer(
  document.getElementById("ssDesigner") /**designer host */,
  designerConfig, // designerConfigJson /**If you want to change Designer's layout or rewrite it, you can pass in your own Config JSON */ ,
  undefined /**If you want to use the spread you already created instead of generating a new spread, pass in */
);

这样我们新建的按钮就可以正常工作了。

181510u74jp8w6xwndwnzg 175000z52rtjdhk3v2tff4

175720ugygcxpipcg9viwn

作者: Grapecity.China | 审核：Richard.Ma | 更新时间：2023.12.16