SpreadJS在线表格编辑器自定义功能 -- 自定义右键菜单（Content Menu）

组件版设计器推出也有一段时间了，也有许多朋友在问如何定制组件设计器的右键菜单。这篇教程就教大家通过简单的demo实现右键菜单。通过自定义一个新的上下文菜单项，可以为用户提供更方便的方式快速到达一些自定义的常用操作。
例如，如果用户想在所有区域右键快捷菜单中添加一个“弹窗菜单”项，选中该项后，将进行自定义操作（本次demo实现一个弹窗操作）。


要实现右键菜单，关键在于右键菜单的显示与点击后触发的命令。




首先，我们先获取到设计器的DefaultConfig

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

复制代码

然后我们将需要点击后执行的命令push到DefaultConfig的commandMap下

1. designerConfig.commandMap = {
   
2. 
   
3.       "myCmd":{
   
4.   
   
5.         text: "弹窗菜单",
   
6.         commandName: "myCmd",
   
7.         execute: () =>{
   
8.           alert("我是重写的右键菜单");
   
9.         }
   
10.       }
    
11.       
    
12.     }

复制代码

我们可以看到，上面的代码将一个命令名为“myCmd”的命令添加到命令树中。光是添加命令还不够，我们还需将该命令添加到contextMenu中，这样我们的右键菜单才会显示对应的项目。最后再初始化设计器实例。

1. designerConfig.contextMenu.push("myCmd");
   
2. var designer = new GC.Spread.Sheets.Designer.Designer(
   
3.       document.getElementById("designer") /**designer host */,
   
4.       designerConfig, // designerConfigJson /**If you want to change Designer's layout or rewrite it, you can pass in your own Config JSON */
   
5.     );
   

复制代码

完成了上面的步骤，我们会发现，在右键单元格、列头行头等都会有这个右键菜单选项。那么如何控制这个右键菜单只在某一个区域显示呢？我们可以在定义命令的时候，可以添加一个visibleContext属性。若只需在点击单元格时出现，则可以用下面的代码。

1. visibleContext:"ClickViewport",

复制代码

若仅需在行头列头右键时出现，则可以用下面的代码

1. visibleContext:"ClickRowHeader || ClickColHeader",

复制代码

下载附件即可查看完整的demo

元老您好，我有类似的需求
问题一：按照您写的帖子，并未实现功能，主要原因在于，添加   new GC.Spread.Sheets.Designer.Designer   这一步代码时，控制台报错，个人怀疑可能与 document.getElementById("designer")        有关，但找不出解决办法。


期望实现右键点击添加按钮功能。附上demo

你是通过标签添加的编辑器，所以并没有id为designer的元素，自然找不到了
但是你在初始化的时候，已经将this.designer做了赋值，这个就是现在的设计器对象
继续用这个做相关设置操作即可

Richard.Ma 发表于 2023-5-29 11:43
你是通过标签添加的编辑器，所以并没有id为designer的元素，自然找不到了
但是你在初始化的时候，已经将th ...

let designerInitialized = (wb) => {
      designer = wb;
      let spread = designer.getWorkbook();

      console.log(spread, "spread");
      console.log(designer, "designer");

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

      designerConfig.commandMap = {
        myCmd: {
          text: "弹窗菜单",
          commandName: "myCmd",
          visibleContext: "ClickRowHeader",
          execute: () => {
            alert("我是重写的右键菜单");
          },
        },
      };

      designerConfig.contextMenu.push("myCmd");

      designer._config = designerConfig;

      console.log(designer, "designer1");

      var sheet = spread.getActiveSheet();
      sheet.setArray(0, 0, [
        [1, 2, 3],
        [4, 5, 6],
        [7, 8, 9],
        [10, 11, 12],
        [13, 14, 15],
      ]);
    };

直接操作设计器对象，菜单也没有出来，麻烦看一下什么问题

阿仁 发表于 2023-7-18 10:36
let designerInitialized = (wb) => {
      designer = wb;
      let spread = designer.getWorkbook ...

您好，您在初始化后再修改config，需要使用setConfig接口来将config重新应用，designer._config = designerConfig是不会生效的。

如：  designer.setConfig(designerConfig);

visibleContext 接受的是字符串，如何控制右键不同的单元格上，对自定义菜单的显示隐藏控制？
场景：在模版字段上右键需要显示 新增的自定义菜单，在其他格子上是不需要的

表格6666 发表于 2023-9-24 13:34
visibleContext 接受的是字符串，如何控制右键不同的单元格上，对自定义菜单的显示隐藏控制？
场景：在模 ...

一个比较可行的实现方案是：
1、将指定的右键菜单command的visibleContext设置为"test1"（举例说明）。
2、监听EnterCell事件，此事件会在单元格上右键时触发，当在指定单元格上右键时，调用designer.setData("test1", true)接口，此时test1的值为true，相应的，在其他的单元格上右键时，设置test1为false即可。