4.1.6.3 多语言系统

优质
小牛编辑
134浏览
2023-12-01

编辑器扩展系统中内置的多语言方案允许扩展配置多份语言的键值映射,并根据编辑器当前的语言设置在扩展里使用不同语言的文字。

要启用多语言功能(以下简称 i18n),请在扩展的目录下新建一个名叫 i18n 的文件夹,并为每种语言添加一个相应的 JavaScript 文件,作为键值映射数据。数据文件名应该和语言的代号一致,如 en.js 对应英语映射数据。

下面是键值映射数据源的例子:

en.js

module.exports = {
  'search': 'Search',
  'edit': 'Edit',
};

zh.js

exports.search = '搜索';
exports.edit = '编辑';

假设注册的扩展名字叫做 hello-world,则对应的文本翻译 key 为 hello-world.search

Editor.I18n.t('hello-world.search');

显示对应语言的文本

在脚本中使用

在 JavaScript 或者 Typescript 脚本中,可以通过 Editor.I18n.t 接口获取当前语言对应的翻译后的文本:

Editor.I18n.t('hello-world.search');

在模版内使用

在 html 模版里需要翻译的话可以使用 ui-label 元素进行翻译:

<ui-label value="i18n:hello-world.search"></ui-label>

ui-label 是一个普通的行内元素,类似 span。

在 json 或者其他文本定义内使用

一些文本信息,例如在扩展包的 package.json 中注册菜单路径时需要使用翻译功能的时候,只要这个字段支持 i18n 格式的路径,该路径就可以用 i18n:${key} 的形式表示。我们可以写 "i18n:menu.extension/i18n:hello-world.edit",对应的功能模块会帮助查找正确的字符串进行替换。