🌏 Internationalization (i18n)

    If you want to contribute language files in addition to the languages ​​supported by default, add them to the path below. See the section for a more detailed contributing process.

    Build (For Maintainers)

    2.   - i18n/
    3.     - ko-kr.js
    4.     - ...

    Files Distributed on npm

    1. - node_modules/@toast-ui/editor/dist/
    2.   - i18n/
    3.     - ...

    Files Distributed on CDN

    1. - uicdn.toast.com/editor/latest/
    2.   - i18n/
    3.     - ko-kr.js
    4.     - ko-kr.min.js
    5.     - ...

    Supported Languages

    Below is a table of valid language codes for i18n files provided by the TOAST UI Editor. This language code is based on the IETF language tag. When you import a language file, the language code is registered and you can set the code as the option.

    You must register the language by importing the language file you want to use. The ${fileName} is corresponding to the ‘i18n File’ column in (Can be used without an extension).

    CommonJS

    1. require('@toast-ui/editor/dist/i18n/${fileName}');

    Usage CDN

    You must register the language by including the language file you want to use. The ${fileName} is corresponding to the ‘i18n File’ column in Supported Languages. It also provides a minified version.

    1. <script src="https://uicdn.toast.com/editor/latest/i18n/${fileName}"></script>

    How to Use

    Use Case 1 : Basic Usage

    If you want to set a specific language, you can use the language option to create an instance. The value of this option corresponds to the ‘Registered Code’ column in . The default value is en and en-US.

    1. import Editor from '@toast-ui/editor';
    3. // Step 1 : Import language file
    4. import '@toast-ui/editor/dist/i18n/ko-kr';
    6. // Step 2 : Set language each editor
    7. const foo = new Editor({
    8.   // Use default language in English
    9.   // ...
    10. });
    12. const bar = new Editor({
    13.   // Use other language
    14.   // ...
    16. });

    Use the setLanguage static method to override the value for a specific language code. See here for default values.

    Use Case 3 : New Language Registration

    If the language you want to use is not provided by default, you can register it with the setLanguage static method.

    2. // Step 1 : Register new language
    3. Editor.setLanguage('en-GB', {
    4.   Markdown: '...',
    5.   WYSIWYG: '...',
    6.   // ...
    7. });
    9. // Step 2 : Set language with new registration code
    10. const bar = new Editor({
    11.   // ...
    12.   language: 'en-GB',
    13. });

    If you want to contribute to providing a different language file, follow this process:

    Step 1

    Fork the repository and add the language file to the path below. The name of the language file follows the ${languageCode}-${countryCode}.js convention. languageCode and countryCode must be written in lowercase. (e.g. en-gb.ts)

    1. - tui.editor/apps/editor/src/
    2.   - i18n/
    3.     - en-us.ts
    4.     - ko-kr.ts
    5.     - ...

    Step 2

    Refer to this file and write each parameter value used when calling the setLanguage method.

    The first parameter is a code value that maps to the language file to register. Code values ​​follow the . languageCode must be in lowercase and countryCode in uppercase.

    1. // th-th.js
    2. // ...
    4. Editor.setLanguage('th-TH', {
    5.   Markdown: '...',
    6.   WYSIWYG: '...',

    If the following conditions are satisfied, the language code except for the country code can be added.

    Example