加载模板按钮

需求：像Excel中有众多模板可以选择

我们都知道，在excel中有众多模板可以供选择。是不是很眼馋？想不想将把这个功能加到我们自己的编辑器中呢？

答案是可以的

下面是我们实现的效果，是不是有模有样？那我们来看下这个是如何实现的吧。

我们知道（不知道的看下前面的文章），编辑器左上角这个“文件”按钮点开之后会是一个特别大的Template，那么想要往里加东西，就需要先获取这个Template，然后按照里面的结构去添加，添加完成之后再注册回去。我们新增的Template是下面这样的一个结构。这个会在附件的custom-file-menu-panel.js文件中，记住这个“custom_item_action_1”bindingPath。

var listDisplayContainer =
    template["content"][0]["children"][0]["children"][1];

// 增加按钮
listDisplayContainer.children.push({
    type: "Container",
    visibleWhen: "activeCategory_main=CustomItem",
    children: [
        {
            type: "TextBlock",
            margin: "50px 0 15px 50px",
            text: "自定义行为",
            style: "font-size:36px;line-height:80px",
        },
        {
            type: "ColumnSet",
            margin: "0 0 0 50px",
            children: [
                {
                    type: "Column",
                    children: [
                        {
                            type: "List",
                            className: "file-menu-list",
                            items: [
                                {
                                    text: "打印",
                                    value: "print",
                                },
                                {
                                    text: "加载模板",
                                    value: "action_1",
                                },

                            ],
                            bindingPath: "custom_item",
                        },
                    ],
                    width: "350px",
                },
                {
                    type: "Container",
                    children: [
                        {
                            type: "Button",
                            margin: "20px 50px",
                            text: "打印",
                            width: 200,
                            height: 200,
                            iconClass: "icon-common1 icon-print",
                            bindingPath: "custom_item_print",
                            iconPosition: "top",
                        },
                    ],
                    visibleWhen: "custom_item=print",
                },
                {
                    type: "Container",
                    children: [
                        {
                            type: "Button",
                            margin: "20px 50px",
                            text: "编辑器模板",
                            width: 200,
                            height: 200,
                            iconClass: "icon-common1 icon-tmp",
                            bindingPath: "custom_item_action_1",
                            iconPosition: "top",
                        },
                    ],
                    visibleWhen: "custom_item=action_1",
                }
            ],
        },
    ],
});

上面的图片是怎么加进去的呢？就是通过iconClass将对应的css引入。其余大家可以通过下面的代码进行研究

.icon-tmp {
    /* 背景图片 */
    background-image: url("./jsonPic.png");
}

.icon-print {
    /* 打印的背景图片 */
    background-image: url("./print.png");
}


.icon-common1 {
    width: 150px;
    height: 150px;
}

设计完模板之后，我们就需要重写下面的这个命令了

GC.Spread.Sheets.Designer.getCommand(GC.Spread.Sheets.Designer.CommandNames.FileMenuPanel);

通过重写execute方法，在里面判断对应的bindingPath是否一致，一致则进到这个case里面包我想要的模板加载或者逻辑添加即可。

var fileMenuPanelCommand = GC.Spread.Sheets.Designer.getCommand(GC.Spread.Sheets.Designer.CommandNames.FileMenuPanel);// 获取文件按钮表盘
var oldExecuteFn = fileMenuPanelCommand.execute;// 执行按钮获取

// 重写执行逻辑
fileMenuPanelCommand.execute = function (context, propertyName, newValue) {
    // console.log(context)
    // console.log(propertyName)
    // console.log(newValue)
    oldExecuteFn.apply(this, arguments);
    switch (propertyName) {
        case 'custom_item_print':// 自定义打印
            var workbook = context.getWorkbook();// context就是designer
            workbook.print();// 打印
            break;
        case 'custom_item_action_1':// 自定义行为1
            var workbook = context.getWorkbook();
            workbook.fromJSON(tmp)// 导入设定好的模板
            GC.Spread.Sheets.Designer.getCommand('fileMenuPanel').execute(designer, "activeCategory_hide", true)// 执行指令
            break;
    }
}

最后，别忘了将新的模板和命令注册回去。

var config = GC.Spread.Sheets.Designer.DefaultConfig;
config.commandMap = {
    fileMenuPanel: fileMenuPanelCommand
}
var designer = new GC.Spread.Sheets.Designer.Designer("gc-designer-container", config);

下载附件请查看论坛精华帖