How to Dynamically Localize TinyMCE

This article will teach you how to dynamically localize your TinyMCE editor. If you aren’t familiar with what TinyMCE is, it’s a what-you-see-is-what-you-get rich text editor for the web, built in JavaScript.

The problem

This tutorial assumes you have built a PHP multilingual site/framework and you, or whoever the admin is, would like TinyMCE to automatically switch to the current language of your site. A practical example would be: you’ve just switched your site’s interface to Spanish, but you realize the interface of the editor is still in English and you would like it to be in Spanish instead.

Although TinyMCE is a great wysiwyg editor that provides localized files for almost every known language, it still does not come with an automatic language-switching feature. It’s very easy to roll your own solution to this problem, though, so that’s what we’re going to do now.

The solution

First, grab the extra language files you need from here and upload them to your TinyMCE directory accordingly.

Let’s assume that on your site/framework, the variable that holds the current language is called $current_lang. You need to check that your $current_lang variable holds values that match TinyMCE’s language codes. In simple terms, TinyMCE’s code for Spanish is ‘es’ and if $current_lang returns ‘sp’ instead of ‘es’ when needed, it just won’t work. So in this case you need to add an extra line or two:

<?php
...
if($current_lang == 'sp') {
    $current_lang = 'es';
} else {
    $current_lang = 'en'; //or whatever the default lang you wish
} 
...

You can look the codes up here and see if they correspond to what you already use on your site/framework.

Now let’s get to the header section of your site/framework where you have previously initialized TinyMCE. We are going to import our php $current_lang variable into our JS code, just above the place where you have initialized tinyMCE.js, as shown below:

<script type="text/javascript">

var cur_lang = "<?php echo $current_lang; ?>"; // do not forget the double quotes

tinyMCE.init({
...

Finally, we add a language parameter/value to our general options section, if that option wasn’t there already.

<script type="text/javascript">

var cur_lang = "<?php echo $current_lang; ?>"; // do not forget the double quotes

tinyMCE.init({
        // General options
        width : "480",
        height : "680",
        mode : "textareas",
        theme : "advanced",
        language : cur_lang,  // Here we have added our language parameter, the value of which corresponds to our current language on the site.
        plugins : 
        ...

Note: Do not forget to modify the Javascript initialization snippet of your TinyMCE compressor too if you have installed one.

That’s it, from now on, your TinyMCE editor’s interface will appear in the language your site is currently in.

Conclusion

TinyMCE is a fantastic tool, but people often jump through various inefficient hoops to make it support localization. In this tutorial, we’ve implemented one common way to do this in just a few short lines of code. Did you use another approach? Let us know!

Frequently Asked Questions on Dynamically Localizing TinyMCE

How can I dynamically add a TinyMCE editor to my webpage?

To dynamically add a TinyMCE editor to your webpage, you need to use the TinyMCE JavaScript API. First, you need to include the TinyMCE script in your HTML file. Then, you can use the tinymce.init() function to initialize the editor. You can specify the selector for the textarea that you want to convert into an editor. For example, if you have a textarea with the id “myTextArea”, you can initialize the editor like this:

tinymce.init({
selector: '#myTextArea'
});

How can I change the language of TinyMCE dynamically using JavaScript?

TinyMCE allows you to change the language dynamically using JavaScript. You can do this by using the language_url option in the tinymce.init() function. This option allows you to specify the URL of the language file that you want to use. For example, if you have a French language file at “langs/fr_FR.js”, you can set the language to French like this:

tinymce.init({
selector: '#myTextArea',
language_url : 'langs/fr_FR.js'
});

How can I output translations without using `document.write`?

If you want to output translations without using document.write, you can use the innerHTML property of the DOM element where you want to output the translations. For example, if you have a div with the id “myDiv”, you can output a translation like this:

document.getElementById('myDiv').innerHTML = 'Your translated text';

How can I use a custom language file in TinyMCE?

You can use a custom language file in TinyMCE by using the language_url option in the tinymce.init() function. This option allows you to specify the URL of your custom language file. For example, if you have a custom language file at “langs/myLang.js”, you can use it like this:

tinymce.init({
selector: '#myTextArea',
language_url : 'langs/myLang.js'
});

How can I configure the localization settings in TinyMCE?

You can configure the localization settings in TinyMCE by using the language and language_url options in the tinymce.init() function. The language option allows you to specify the language code, and the language_url option allows you to specify the URL of the language file. For example, if you want to set the language to French and use a custom language file, you can do it like this:

tinymce.init({
selector: '#myTextArea',
language: 'fr_FR',
language_url : 'langs/myLang.js'
});