Languages

Overview #

Redactor is made that all the words or sentences in it can be translated into any language. The default language is English.

Language setting #

To set the language in the editor, the translation file must be connected after the JS editor file. For example:

<!-- redactor js file -->
<script src="/your-folder/redactor.min.js"></script>

<!-- language file -->
<script src="/your-folder/de.js"></script>

Now when you call the editor, specify your language in the settings, for example:

Redactor('#entry', {
    lang: 'de'
});

Plugin translation #

The easiest way to translate a plugin is to add language variables directly to its code, using the translations object.

For example:

Redactor.add('plugin', 'myplugin', {
    translations: {
        en: {
            "myplugin": {
                "get-code": "Get Code",
                "set-code": "Set Code"
            }
        },
        de: {
            "myplugin": {
                "get-code": "Code abrufen",
                "set-code": "Code einstellen"
            }
        }
    },
    start() {
        // get the language variable
        let value = this.lang.get('myplugin.get-code');

        // parse a string with language variable
        let str = this.lang.parse('My string with ## myplugin.get-code ## variable.');
    }
});

In the same example, in the start method, you can see how to access the language variables in the plugin and how to convert the variable if it is in a text string.

addLang method #

There is a second way to translate plugins or to add the language variables to the editor. This is the Redactor.addLang method. For example, you can specify for it a language index and an object with variables that will be added to this language:

Redactor.addLang('de', {
    "myplugin": {
        "get-code": "Code abrufen",
        "set-code": "Code einstellen"
    }
});

Now the specified variables will be available in the editor language object and you can get them using the this.lang.get method, for example:

let value = this.lang.get('myplugin.get-code');

Translations setting #

This is a simple way to specify language variables in Redactor settings when the editor starts.

Redactor('#entry', {
    lang: 'sv',
    translations: {
        sv: {
            "modal": {
                "link": "Länk",
                "image": "Bild",
                "add-image": "Lägg till bild"
            }
        }
    }
});

In this example, the editor is started with Swedish language specified and the translations setting changes the values of the modal titles.