Language selection with FCKEditor

The FCKEditor in browser WYSIWYG HTML editor by default automatically detects the language it should use from the browser itself and falls back to a default setting. This post looks at how to change the default language and how to override the settings to it always uses a selected language.

FCKEditor posts are made on this blog roughly every 10 days in the Javascript category, although there is often some crossover with PHP. If you are interested in following this series be sure to subsribe to my RSS feed. See the subscribe details at the end of this post.

The language files

The language files in FCKEditor are at editor/lang and are named e.g. en.js for English; en-uk.js for British English; fr.js for French and so on. These Javascript files contain a large associative array and the values are used in the various dialogs.

An example from the start of the en.js file looks like this:

var FCKLang =
{
// Language direction  : "ltr" (left to right) or "rtl" (right to left).
Dir                    : "ltr",

ToolbarCollapse        : "Collapse Toolbar",
ToolbarExpand          : "Expand Toolbar",

// Toolbar Items and Context Menu
Save                   : "Save",
NewPage                : "New Page",
Preview                : "Preview",
Cut                    : "Cut",
Copy                   : "Copy",

The same few lines from the start of the fr.js French language file look like this:

var FCKLang =
{
// Language direction  : "ltr" (left to right) or "rtl" (right to left).
Dir                    : "ltr",

ToolbarCollapse        : "Masquer Outils",
ToolbarExpand          : "Afficher Outils",

// Toolbar Items and Context Menu
Save                   : "Enregistrer",
NewPage                : "Nouvelle page",
Preview                : "Prévisualisation",
Cut                    : "Couper",
Copy                   : "Copier",

Specifying the default language

FCKEditor will attempt to work out which language file to use from the web browser itself and if it cannot work it out, or if the language is not supported, it will fall back to the default. This is specified by the "DefaultLanguage" configuration option.

In your custom configuration file (read my earlier post here) you could add this to make the default language French thus overriding the default value specified in the main fckconfig.js file:

FCKConfig.DefaultLanguage = 'fr';

You could also do this on the server side. In PHP you would do it like this, where $oFCKeditor is an FCKEditor object:

$oFCKeditor->Config['DefaultLanguage'] = 'fr';

Note that this does not force the language in the editor to French; it just makes that the fallback language if the browser could not automatically detect it.

Overriding the automatic language selection

It is possible to override the automatic language selection and force the language to be of your choosing. The "AutoDetectLanguage" configuration option must be set to false and you set the language in the same way as above with the "DefaultLanguage" option.

In Javascript:

FCKConfig.DefaultLanguage = 'fr';
FCKConfig.AutoDetectLanguage = false;

In PHP:

$oFCKeditor->Config['DefaultLanguage'] = 'fr';
$oFCKeditor->Config['AutoDetectLanguage'] = false;

Future posts

The next FCKEditor post will be on March 3rd and will show how to provide the user with a drop down box so they can select the language themselves.