SpreadJS在线表格编辑器自定义功能 - 开始菜单添加字体选项

SpreadJS 在V14版本新推出了在线表格编辑器的组件化版本。在组件化版本中，在线表格编辑器的定制化将通过配置与接口的调用来完成，这里不同于源码版本中修改代码的操作。通过本博客的描述，我们将明白如何使用在线表格编辑器去添加和扩展可用的字体选项。

当我们打开在线表格编辑器后，在开始菜单中可以看到设置字体的下拉菜单选项，如下图所示：

组件版在线表格编辑器默认自带的字体中，全是西文字体。所以当小伙伴们需要通过菜单去设置中文字体时候，就需要对此下拉菜单进行扩展。
组件版编辑器中，所有的菜单选项都是通过执行对应的命令来完成相应操作的，并且我们可以通过在线表格编辑器中的configjson来查找到对应模块的命令。
首先获取config配置，这里通过代码获取了默认的config配置，如果有自定义可以缓存起来直接获取。

1. let config = JSON.parse(JSON.stringify(GC.Spread.Sheets.Designer.DefaultConfig));

复制代码

之后在其中找到字体设置的相关command命令名称，这里可以按照ribbon中的层级关系进行定位

之后在GC.Spread.Sheets.Designer.CommandNames中找到对应的枚举。

1. GC.Spread.Sheets.Designer.CommandNames.FontFamily

复制代码

然后通过GC.Spread.Sheets.Designer.getCommand获取对应命令

1. var fontFamilyCommand = GC.Spread.Sheets.Designer.getCommand(GC.Spread.Sheets.Designer.CommandNames.FontFamily);

复制代码

在其中的dropdownList中我们可以看到当前所有的下拉列表选项，这个时候我们只要在其中push我们想要自定义的字体

1. fontFamilyCommand.dropdownList.push({
   
2. text: "微软雅黑",
   
3. value: "微软雅黑"
   
4.                         });

复制代码

之后我们需要把修改后的command重新设置到config中

1. if(!config.commandMap) config.commandMap = {}
   
2. config.commandMap[GC.Spread.Sheets.Designer.CommandNames.FontFamily] = fontFamilyCommand;
   

复制代码

这样完成之后我们刷新一下浏览器看一下结果

支持，不过字体文件的名称必须css font family中的名称，并且字体要安装到机器中，例如下面这个自定义字体

名称也必须是上面那一长串

Clark.Pan 发表于 2023-12-15 10:03
滚动条滚到最后呢？
或者设置之后有没有重新setConfig？

感谢大佬，setConfig 之后生效了。另外想请教下， spreadjs 支持自定义的字体文件吗？

滚动条滚到最后呢？
或者设置之后有没有重新setConfig？

版主，为啥我dropdownList 设置微软雅黑成功了，但是开始菜单栏字体下拉框没看到微软雅黑

酸的萌萌yeath 发表于 2021-4-21 17:25
按照操作下来有问题，报错config not defined，V14.0的版本不适用吗？

报错：

config not defined说明config没有定义。建议您开个新帖子将您的有问题以及demo上传，这边给您调研看下那块用法有误。

按照操作下来有问题，报错config not defined，V14.0的版本不适用吗？

报错：
vue.esm.js?efeb:628 [Vue warn]: Error in v-on handler: "ReferenceError: config is not defined"

酸的萌萌yeath 发表于 2021-4-21 15:36
这个是啥问题，提示这个fontFamilyCommand 声明的问题

这个应该是您声明变量的问题，建议您到搜索引擎查找相关资料。

这个是啥问题，提示这个fontFamilyCommand 声明的问题

酸的萌萌yeath 发表于 2021-4-21 14:35
版主，新加得字体，只要本地PC有安装这些字体文件，就可以正常显示？ 不需要集成字体进来吗？

对的，pc上有的网页就能正常显示。但是如果需要导出pdf依然是需要注册对应的字体的。