Select the interface language in FCKEditor from a select box

Posted March 6th, 2009 in FCKEditor

My last FCKEditor post looked at how to change the default language setting and my last Javascript post how to add options to an HTML select box. This post combines the two and looks at how to add a drop down box to allow the FCKEditor user to select which language they would like to use, defaulting to the editor selected default if none is chosen.

The select box

The select box is not populated at the start; we leave that up to the Javascript which reads the language values from an instance of FCKEditor.

<select id="languages" onchange="change_language(this.value);">
</select>

Populating the select box

When the FCKEditor instance has finished loading it will trigger a function called FCKeditor_OnComplete passing in an instance of the editor. This can be used to populate the select box as shown in the following Javascript code.

function FCKeditor_OnComplete(editor) {
    
    var select = document.getElementById("languages");
    for(lang in editor.Language.AvailableLanguages) {
        select.options[select.options.length] = 
          new Option(editor.Language.AvailableLanguages[lang], lang);
    }
    select.value = editor.Language.ActiveLanguage.Code;
   
}

The "select" var is a handle to the "languages" drop down select box. A for loop is then done for each of the available languages and added to the select box. Finally the selected value is set to the currently active language defined in the editor instance.

onchange trigger

The select box has an onchange trigger which calls a function called change_language() passing in the selected language code. The following Javascript function handles this:

function change_language(lang) {
    window.location.href = window.location.pathname + "?lang=" + lang ;
}

The window's location is changed to the pathname component followed by ?lang and the language code.

Server sided code

The change of language now has to be handled on the server-side. I will illustrate how to do this using PHP but it can be done in any of the supported FCKeditor programming languages or even in Javascript itself. I program in PHP so it's easiest for me to show it this way.

$oFCKeditor = new FCKeditor('html');
if(isset($_GET['lang'])) {
    $oFCKeditor->Config['AutoDetectLanguage'] = false ;
    $oFCKeditor->Config['DefaultLanguage'] = $_GET['lang'] ;
}
else {
    $oFCKeditor->Config['AutoDetectLanguage'] = true ;
    $oFCKeditor->Config['DefaultLanguage'] = 'en' ;
}
$oFCKeditor->Create();

If the "lang" GET parameter is set then the language is changed to that language. Otherwise the language auto detection is enabled and the default set to English.

Screenshot examples

The following example screenshot shows the populated language drop down box and the link dialog box in English.

The second screenshot example shows the same thing but with French selected.

Future FCKEditor posts

I post an FCKEditor tutorial roughly every 10 days in the Javascript section of this blog, looking at things like how to override particular settings, change dialogs to your own custom dialog etc. If there's an FCKeditor topic you'd like covered here please feel free to contact me and let me know what you'd like to see.