Bpmn.js 在线流程编辑器的汉化

14,771 阅读1分钟

    距离上一篇的 《Vue 整合Bpmn-js 工作流模型编辑器》 也一个多月了,在最近又收到公司的一个需求就是要我把Bpmn.js 流程编辑器给汉化了,没得办法又要回头去汉化这个编辑器。今天呢我就跟着上篇的基础来说说怎么汉化Bpmn.js。

    Github 完整代码bpmn-demo     作者博客Winily

1. 先把编辑器搭建好

    对于这一部就直接按照我的上一篇进行搭建就好,就是上面那个《Vue 整合Bpmn-js 工作流模型编辑器》。

2. 接下来我们要去下载汉化文件

    对于这个汉化文件我是在码云上找到了一位大佬翻译好的文件,链接 里面有两个文件 translationsGerman.js 和 customTranslate.js,其中 translationsGerman.js这个文件是翻译好的文本配置,customTranslate.js 的话就是汉化器了,它会按照获取到编辑器原本的配置对比 translationsGerman.js 中的配置然后进行替换操作,将相关英文替换为中文文本。

3. 接下来把汉化文件载入编辑器

    刚刚下好了那两个文件基本来说汉化操作已经完成了百分之九十了,只要进行最后的将它载入到我们的 Bpmn.js 编辑器即可。

    我这里为了方便就直接放在src目录下了,实际按照你们自己封装组件整理好。接下来就是在组件中导入一下然后载入即可。

    导入后载入到编辑器中,在上一篇做好的基础上加上这两步,汉化就完成了。

4. 效果图