SpreadJS在线表格编辑器自定义功能 - 开始菜单添加字体选项
本帖最后由 dexteryao 于 2022-3-7 11:24 编辑SpreadJS 在V14版本新推出了在线表格编辑器的组件化版本。在组件化版本中，在线表格编辑器的定制化将通过配置与接口的调用来完成，这里不同于源码版本中修改代码的操作。通过本博客的描述，我们将明白如何使用在线表格编辑器去添加和扩展可用的字体选项。
当我们打开在线表格编辑器后，在开始菜单中可以看到设置字体的下拉菜单选项，如下图所示：
组件版在线表格编辑器默认自带的字体中，全是西文字体。所以当小伙伴们需要通过菜单去设置中文字体时候，就需要对此下拉菜单进行扩展。
组件版编辑器中，所有的菜单选项都是通过执行对应的命令来完成相应操作的，并且我们可以通过在线表格编辑器中的configjson来查找到对应模块的命令。
首先获取config配置，这里通过代码获取了默认的config配置，如果有自定义可以缓存起来直接获取。
let config = JSON.parse(JSON.stringify(GC.Spread.Sheets.Designer.DefaultConfig));
之后在其中找到字体设置的相关command命令名称，这里可以按照ribbon中的层级关系进行定位
之后在GC.Spread.Sheets.Designer.CommandNames中找到对应的枚举。
GC.Spread.Sheets.Designer.CommandNames.FontFamily然后通过GC.Spread.Sheets.Designer.getCommand获取对应命令
var fontFamilyCommand = GC.Spread.Sheets.Designer.getCommand(GC.Spread.Sheets.Designer.CommandNames.FontFamily);在其中的dropdownList中我们可以看到当前所有的下拉列表选项，这个时候我们只要在其中push我们想要自定义的字体
fontFamilyCommand.dropdownList.push({
text: "微软雅黑",
value: "微软雅黑"
});之后我们需要把修改后的command重新设置到config中
if(!config.commandMap) config.commandMap = {}
config.commandMap = fontFamilyCommand;
这样完成之后我们刷新一下浏览器看一下结果
版主，新加得字体，只要本地PC有安装这些字体文件，就可以正常显示？ 不需要集成字体进来吗？ 酸的萌萌yeath 发表于 2021-4-21 14:35
版主，新加得字体，只要本地PC有安装这些字体文件，就可以正常显示？ 不需要集成字体进来吗？
对的，pc上有的网页就能正常显示。但是如果需要导出pdf依然是需要注册对应的字体的。 这个是啥问题，提示这个fontFamilyCommand 声明的问题 酸的萌萌yeath 发表于 2021-4-21 15:36
这个是啥问题，提示这个fontFamilyCommand 声明的问题
这个应该是您声明变量的问题，建议您到搜索引擎查找相关资料。 按照操作下来有问题，报错config not defined，V14.0的版本不适用吗？
报错：
vue.esm.js?efeb:628 : Error in v-on handler: "ReferenceError: config is not defined" 酸的萌萌yeath 发表于 2021-4-21 17:25
按照操作下来有问题，报错config not defined，V14.0的版本不适用吗？
报错：
config not defined说明config没有定义。建议您开个新帖子将您的有问题以及demo上传，这边给您调研看下那块用法有误。 版主，为啥我dropdownList 设置微软雅黑成功了，但是开始菜单栏字体下拉框没看到微软雅黑 滚动条滚到最后呢？
或者设置之后有没有重新setConfig？
Clark.Pan 发表于 2023-12-15 10:03
滚动条滚到最后呢？
或者设置之后有没有重新setConfig？
感谢大佬，setConfig 之后生效了。另外想请教下， spreadjs 支持自定义的字体文件吗？
页:
[1]
2