Richard.Huang 发表于 2024-5-24 17:16:32

如何借助插件自定义在线表格编辑器

本帖最后由 Richard.Huang 于 2024-5-24 17:20 编辑

背景我们技术顾问在为用户验证问题或者做demo演示时,总会选择在在线表格编辑器中进行测试,因为这是官网是一个标准的Designer示例,既方便我们也方便用户去测试和验证问题,但是在线表格编辑器为了方便宣传的需要,会初始化一些繁杂的内容。对于我们想要验证用户的问题会存在很多需要重复的编码或者操作。如何将重复的编码封装成一个按钮放在工具栏并且简化我们工作过程中重复的操作呢?

这里推荐一款插件编辑器Tampermonkey,我们可以在里面绘制一些脚本来优化我们技术顾问日常的工作

步骤安装油猴插件
直接在浏览器扩展程序商店搜索Tampermonkey


编码介绍
以下是一个油猴插件编码的必要参数,编辑好后,我们就可以在Your code here这里编写自己想要的内容了


针对性编码
1. 初始化一个新的没有任何内容的空的在线表格编辑器
var designer = new GC.Spread.Sheets.Designer.Designer(
"gc-designer-container"
);2. 去除右下角广告
function removeRightBottomDiv() {
// 删除右下角的悬浮div
var sectionToDelete = document.querySelector(
    ".section-sideBar.section-sideBar-spjs"
);
if (sectionToDelete) {
    sectionToDelete.remove();
}
}3. 将spread、activeSheet、designer对象挂载在window上方便使用
// 创建一个全局变量
window.designer = GC.Spread.Sheets.Designer.findControl(
document.getElementById("gc-designer-container")
);
window.spread = designer.getWorkbook();
window.sheet = spread.getActiveSheet();
getPopDiv("获取成功,请查看控制台");
// 在控制台输出变量值
console.log("获取变量成功");
完整插件1. 完整插件

2. 插件导入

3. 功能演示
切换到自定义工具栏即可畅享自定义工具栏功能的乐趣了

页: [1]
查看完整版本: 如何借助插件自定义在线表格编辑器