Change the language of tinyMCE (using tinymce-i18n)

If you have a paid subscription for tinyMCE, simply changing the language option is all you need to do.

The languages available in the paid model are as follows. (link)

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  language: 'ko_KR'
});

In this post, we will explore how to change the language when using bundling without a paid subscription.

Official Page Guidelines

First, here are the guidelines provided on the official page.

1. Download the language pack from the Tiny Community Language Packages download page.
2. Set the language option in your TinyMCE configuration to the language code, matching the filename on the language pack. For example: If the language pack has the filename sv_SE.js, then set language: 'sv_SE',
3. Confirm that the language has been set successfully by loading TinyMCE.

 

First, download the language pack, then configure the language and language_url options. However, when you need to support multiple languages, it can be quite cumbersome to download each language individually. Furthermore, language packs are continuously updated through community contributions, making it challenging to keep up with these updates.

Using tinymce-i18n

With the tinymce-i18n package, you can conveniently manage languages. First, use npm to install tinymce-i18n:

npm i tinymce-i18n

 

Then, import it as you would import a plugin. Modifying the official page's example would look like this:

import { Editor } from '@tinymce/tinymce-react';

// Importing the language packs
import 'tinymce-i18n/langs6/ko_KR';

export default function BundledEditor(props) {
  // ...
}

Under tinymce-i18n, languages are separated by versions into langs4, langs5, and langs6, so you can choose the one you need.

Please note that there are some differences in the country codes used by tinymce and tinymce-i18n. For example, for Simplified Chinese, tinymce uses zh-CN while tinymce-i18n uses zh-Hans. Import the file names accordingly, as shown in this link.

Next, as in the official example, add the language code to the language option in tinymce.init. Use the country code as specified in the file name, as mentioned earlier.

Alternative method for setting the country code:

I encountered a bug where the language was not set correctly even when I added the country code to the language option. To address this, I included code to change the country code when the editor is loaded.

tinymce.init({
   ...options,
   init_instance_callback: (editor) =>
      tinymce.util.I18n.setCode('ko_KR')
})

Using init_instance_callback allows you to register a callback when the editor has finished loading. In this case, I manually set the language using tinymce.util.I18n within that function. This can be useful not only in case of errors but also for implementing language switching and other features.