登录/注册

首页 › SpreadJS & GcExcel专区 › 教程集锦 › 查看内容

40 主题	3180 帖子	4854 积分

Rank: 8 Rank: 8

积分: 4854

14490
金币
40
主题
3180
帖子

最新发帖

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

SpreadJS 开发认证

超级版主 / 发表于：2024-5-24 17:16 / 查看：223 / 回复：0

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

背景

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

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

步骤

安装油猴插件
直接在浏览器扩展程序商店搜索Tampermonkey
image.png616997375.png

image.png616997375.png

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

image.png343605346.png

针对性编码
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. 完整插件

简化Designer-2024-05-20.user.js (232.11 KB, 下载次数: 11)

收藏

回复

0 个回复