Winny 发表于 2022-3-10 15:24:24

在线表格编辑器修改显示文字(简体中文转换为繁体中文)

在线表格编辑器目前支持中、英、日、韩四种语言,如果需要用其它语言,并没有现成提供的资源包。在实际项目中,如果我们需要支持别的语言,或者需要将现在一些显示的文字内容替换为自己想要的内容,应该如何来实现呢?
针对上述场景,本文以将简体中文修改为繁体中文为例,提供了一种实现方式。
Step1: 修改在线表格编辑器的config信息;
var config = GC.Spread.Sheets.Designer.DefaultConfig
console.log(config)   //可以打印出来自己看看结构
config.ribbon.text='開始'
config.ribbon.text='頁面佈局'
config.ribbon.text='數據'
config.ribbon.text='視圖'
config.ribbon.text='設置'通过上述修改之后,在线表格编辑器操作Tab中的文字就已经成为繁体了。

当然,我这里只是演示,修改了一部分,如果想要全部修改,可以将默认的config信息保存成js文件,在文件中进行全量的修改,修改完成之后,将修改完的变量引入到在线表格编辑器所在的页面,再设置给当前创建的在线表格编辑器,而不需要像我这样单个属性的去设置。

Step2: 修改全局资源;
第一步中,对工具栏显示的文字做了修改,但除此之外,在操作中,还有不少弹框,这些弹框中也存在不少的文字,考虑全局的统一性,这些文字当然也是要修改的。
//这里是designer的全局资源对象,包含很多弹出框中的显示文字
var resources = GC.Spread.Sheets.Designer.getResources()
console.log(resources)      //打印出来自己看看结构
resources.borderDialog.border = '邊框'
resources.borderDialog.presets = '預置'修改完成后,需要将当前修改后的资源重新设置在GC上,全局资源和配置信息的重新设置,我会在第三步做统一的讲解。当前这段代码是修改了设置边框弹框的部分文字,设置完效果如下:

同样,我这里只演示了部分修改。全局修改可以在拿到resources信息之后,将当前resources保存在一个js文件中,直接去修改这个js文件中的目标内容。修改完成后,将这个资源变量引入到在线表格编辑器所在的页面即可,而不需要一个一个的再去修改属性。

Step3:绑定修改后的语言资源。
//设置全局资源为修改之后的资源
GC.Spread.Sheets.Designer.setResources(resources)
//设置当前designer使用的配置信息
let designer = new GC.Spread.Sheets.Designer.Designer("designer-container")
designer.setConfig(config)
完整的demo代码可参考:https://jscodemine.grapecity.com/share/mtz4QYTHAEyRn1-fIv84Yg/

tips:修改资源其实算是有一定工作量的工程,如果我们有明确的其它语言的设置需求,可以向葡萄城反馈自己的需求,如果用户类似的需求很多的话,我们或许可以将改需求纳入下一个版本的规划中~
页: [1]
查看完整版本: 在线表格编辑器修改显示文字(简体中文转换为繁体中文)