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!