SpreadJS在线表格编辑器自定义功能 -- 定制工具栏（Ribbon）

收藏

本帖最后由 dexteryao 于 2021-2-3 14:02 编辑

SpreadJS组件版在线表格编辑器发布有1个月时间了，有很多用户已经开始迁移到组件版的设计器上进行集成开发，本帖将告知大家如何在组件版设计器上定制上方ribbon的内容。
首先组件版在线表格编辑器上方的ribbon不同于之前的源码版，在自定义扩展上是通过json文件配置来完成的。这个配置的json文件，默认的就在组件版在线表格编辑器的安装包中
image.png285023497.png

如上图所示，default_config.json就是一个默认的配置文件。我们打开这个文件看一下内容：
image.png615456542.png

可以看到层级关系非常清晰，其中如果我们想要自己去删减某些菜单项，那么直接在json上进行删减即可。如果我们想要添加新的菜单项也可以在上面层级关系的基础上进行添加。唯一一点需要注意的地方，组件版在线表格编辑器的ribbon执行均是通过命令的方式去执行的，类似于SpreadJS的自定制上下文菜单，我们需要将每一个我们新增的riibon菜单项的执行代码封装成一个command，并进行注册。然后json中的command下配置对应的命令名称，这样就可以完成执行。
另外，在sample示例中，只有purejs的demo引入了default_config.json菜单json文件，使用源生js的同学可以可以参考该demo来进行扩展。
如果是VUE或React框架由于示例中没有引入，可能有些同学在这块会看不懂，下面会进行说明。
我们以sample中的vue示例来举例:
APP.vue中的config是一个null,这句的意思代表加载默认的源生ribbon菜单，如果想要加载对应的自定义ribbon,将null替换为对应的json对象即可。至于json如何获取，可以hardcode也页面上，也可以通过读取对应json文件来获取。
image.png624127502.png

crawler · crawler

厉害

dexteryao · dexteryao

crawler 发表于 2021-1-15 17:28
厉害

后续还有更详细的文章，敬请期待

		自动登录	找回密码
密码			立即注册

SpreadJS在线表格编辑器自定义功能 -- 定制工具栏（Ribbon）

2 个回复

讲师达人

悬赏达人

微信认证勋章

SpreadJS 认证

SpreadJS 高级认证

元老葡萄