Multilingual (i18n)

The built-in multi-language solution in the editor extension system allows the extension to configure multiple language key-value mappings, and use different language texts in the extension according to the current language setting of the editor.

To enable the multilingual function (here-in-after referred to as i18n), please create a new folder named i18n under the extended directory, and add a corresponding JavaScript file for each language as key-value mapping data. The data file name should be consistent with the language code, such as en.js corresponding to English mapping data.

The following is an example of a key-value mapping data source:

en.js

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

zh.js

exports.search ='Search';
exports.edit ='Edit';

Assuming that the registered extension name is hello-world, the corresponding text translation key is hello-world.search

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

Display the text in the corresponding language

Use in script

In JavaScript or TypeScript scripts, you can obtain the translated text corresponding to the current language through the Editor.I18n.t interface:

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

Use in the template

If you need to translate in the html template, use the ui-label element to translate:

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

ui-label is a normal inline element, similar to span.

Use in json or other text definitions

Some text information, for example, when you need to use the translation function when registering the menu path in the package.json of the extension package, as long as this field supports the path in the i18n format, the path can be expressed in the form of i18n:${key}. We can write i18n:menu.extension/i18n:hello-world.edit, and the corresponding function module will help find the correct string for replacement.