Sometimes there is a need to customize the labels of the default menu options in TinyMCE to make it more meaningful and user friendly in an application.
This can be achieved in two easy steps:
Modify the text for labels in the language pack.
Include the language pack in your TinyMCE configuration file.
What is a Language Pack?
TinyMCE has a ‘language’ option in its configuration setting which allows you to specify the language in which TinyMCE’s user interface will appear.By default, TinyMCE uses US English (en_US) as its language.If you want to use a language other than US English you can download the language pack from here. A language pack is simply a .js file with key value pairs. These key/value pairs allow the editor to insert language specific text into the UI based on the language setting in your TinyMCE configuration.
Examining a Language Pack
Before we start creating or modifying the language pack here is an example of what a typical language pack looks like:
"Heading 5": "Encabezado 5",
"Header 2": "Encabezado 2 ",
"Heading 4": "Encabezado 4",
This example shows a portion of the Spanish language pack with the key/value pairs that allow the editor to insert language specific text into the UI.
Creating / Modifying a Language Pack
Now that we know what a language pack is, let's create a language pack in TinyMCE to change the text of some default labels in US English. If you are using a language other than US English please read this note before continuing.
We recommend you to download the en_GB (British English) language pack from here and remove all the key/value pairs you don’t want to override so that it leaves you with a small file for en_US. This method allows you to see all the labels available that can be changed.
If you have downloaded the en_GB language file please make sure you rename it to en_US.js before continuing as the remainder of this article will demonstrate making changes to the en_US labels.
Note: The default language in TinyMCE is US English so there is no en_US language pack available for download. Using the British English file ensures you have a valid language file as a starting point for the remainder of this article.
Now that we have a valid language file we need to make two different changes to the file to make it a proper en_US file.
First, you need to update the addi18n method to reference the en_US language:
Second, you will modify the labels you want to change. In the following example we are updating only two labels:
"Tools": "Code View"
Once you save these changes you have a valid en_US language file that will modify the labels for the Format and Tools menus. The remainder of the labels will stay with their defaults as we have not provided a key/value pair in our language file.
Deploying your Language Pack
Once you have the language pack ready the next and final step is to include the language pack in your TinyMCE configuration file.To do this first we need to place the language file in the tinymce/js/langs folder and then set the language option in TinyMCE configuration to the language code you have given to your language file as in the below snippet.
language : "en_US", // change language here
mode : "textareas",
theme : "modern"
Assuming you do not get an error trying to load the language file, you can now confirm that the language has been set successfully in TinyMCE.
Tip : when you add new files and configuration settings to your TinyMCE setup it is always a best practice to clear the browser cache to see the expected changes immediately.
In our example, the Format and Tools menu labels have been changed to Style and Code View as seen in this screenshot:
What about other Languages?
So now we understand how to change the default text labels when the language is US English - but what if you use TinyMCE in another language?Is it the same process?
Unlike US English, you are already using a Language Pack so instead of creating a new file you simply modify your existing Language Pack file.
For example, if you are using TinyMCE with the German Language Pack you would open the de.js language file located in the tinymce/js/langs folder and modify it by changing the labels and saving the changes.
With very little effort, you can change the default text labels in Menus, Dialogs and the Context Menu by creating or modifying the Language Pack for the labels to be changed and then including the language pack in your TinyMCE configuration file.