组件化编辑器自定义 -工具栏添加字号

收藏

本帖最后由 Lynn.Dou 于 2022-2-28 10:31 编辑

背景：
同Excel一样，组件化编辑器工具栏也有默认的字号列表，用户可以通过简单的UI操作实现改变单元格字体大小。
但默认的字号范围为 8至72，对一些小伙伴来说，不能满足实际的需要，那是否可以通过自定义来补充一些新字号呢？
让我们一起来学习下：

步骤：
1、首先还是先获取下编辑器的默认config

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

复制代码

2、接下来我们来看下默认的字号列表是什么样的结构

GC.Spread.Sheets.Designer.getCommand(GC.Spread.Sheets.Designer.CommandNames.FontSize)

复制代码

上图可以看到，dropdownList为字号列表信息的数组。
所以如果我们想添加新字号，在此数组里添加相应的元素即可。
3、添加字号“6”

// 修改原命令
fontSizeCommand.dropdownList.unshift({
text: "6",
value: "6"
});
// 使新命令生效
designerConfig.commandMap = {};
designerConfig.commandMap[GC.Spread.Sheets.Designer.CommandNames.FontSize] = fontSizeCommand;

复制代码

4、测试是否添加成功
将修改后的designerConfig作为参数来初始化designer。

var d = new GC.Spread.Sheets.Designer.Designer("gc-designer-container", designerConfig, undefined);

复制代码

最终效果如下图：

测试demo请参考附件。

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

组件化编辑器自定义 -工具栏添加字号

0 个回复

SpreadJS 认证

SpreadJS 高级认证

讲师达人

悬赏达人