Languages

Overview #

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

To translate, you can download a file with English as an example and replace words and phrases in your language.

Download en.js

Language setting #

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

<!-- article editor js file -->
<script src="/your-folder/article-editor.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:

<script>
 ArticleEditor('#entry', {
    css: '/your-article-dist-path/',
    editor: {
        lang: 'de'
    }
});
</script>

Plugin translation #

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

For example:

ArticleEditor.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: function() {
        // get the language variable
        var value = this.lang.get('myplugin.get-code');

        // parse a string with language variable
        var str = this.lang.parse('My string with  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.

You can see how to specify language variables in the plugin, using the example of the Inline Format plugin.

The addLang method #

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

ArticleEditor.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:

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