Setting the UI language

You can change the language of the editor’s UI. On top of 41 fully translated languages (including 38 professional translations), there are many other languages covered by community translators.

# Demo

See the demo of the editor in Spanish:

# Right–to–left (RTL) languages support

CKEditor 5 supports right–to–left languages out–of–the–box. When one of RTL languages is used, the WYSIWYG editor adapts its UI for the best editing experience, for instance, mirroring various elements like toolbars, dropdowns, buttons, etc.

# Demo

See the demo of the editor in Arabic:

We are doing our best to deliver the best RTL support to our users and we constantly improve the editor. Check out the RTL support issue on GitHub to learn more and stay up–to–date. Your feedback is much appreciated!

# Loading additional languages from npm or CDN

By default, the editor will display in American English. This is the language built into the ckeditor.js files. To change the language of the editor UI, you need to load additional language file(s). Check out the following sections to see how to do that:

• npm
• CDN

# npm

After installing the editor from npm, translations can be imported from ckeditor5/translations/[lang].js and must be passed to the editor configuration.

For example, to use Polish, import 'ckeditor5/translations/pl.js' and pass the translation object to the editor configuration. Please note that if you use premium features, you need to separately import their translations from the proper package.

import { ClassicEditor, Essentials, Paragraph } from 'ckeditor5';
import { TableOfContents } from 'ckeditor5-premium-features';

import coreTranslations from 'ckeditor5/translations/pl.js';
import premiumFeaturesTranslations from 'ckeditor5-premium-features/translations/pl.js';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [
            Essentials,
            Paragraph,
            TableOfContents
        ],
        toolbar: {
            items: [ 'undo', 'redo', 'tableOfContents' ]
        },
        translations: [
            coreTranslations,
            premiumFeaturesTranslations
        ]
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

See the npm installation guide for more information.

# CDN

To use different language than the default one (English), you need to load the editor together with the preferred language. For example:

<link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/42.0.0/ckeditor5.css">
<link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5-premium-features/42.0.0/ckeditor5-premium-features.css">

<script type="importmap">
{
    "imports": {
        "ckeditor5": "https://cdn.ckeditor.com/ckeditor5/42.0.0/ckeditor5.js",
        "ckeditor5/": "https://cdn.ckeditor.com/ckeditor5/42.0.0/",
        "ckeditor5-premium-features": "https://cdn.ckeditor.com/ckeditor5-premium-features/42.0.0/ckeditor5-premium-features.js",
        "ckeditor5-premium-features/": "https://cdn.ckeditor.com/ckeditor5-premium-features/42.0.0/"
    }
}
</script>
<script type="module">
import { ClassicEditor, Essentials, Paragraph } from 'ckeditor5';
import { TableOfContents } from 'ckeditor5-premium-features';

import coreTranslations from 'ckeditor5/translations/pl.js';
import premiumFeaturesTranslations from 'ckeditor5-premium-features/translations/pl.js';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [
            Essentials,
            Paragraph,
            TableOfContents
        ],
        toolbar: {
            items: [ 'undo', 'redo' 'tableOfContents' ]
        },
        translations: [
            coreTranslations,
            premiumFeaturesTranslations
        ]
    } )
    .then( /* ... */ )
    .catch( /* ... */ );
</script>

See the CDN installation guide for more information.

# Setting the language of the content

In CKEditor 5 you can separately configure the language of the UI and the language of the content. This means you can use the English UI of the editor but type your content in Arabic or Hebrew. The language of the content has an impact on the editing experience, for instance it affects screen readers and spell checkers. It is also particularly useful for typing in certain languages (like right–to–left ones) because it changes the default alignment of the text.

Configure config.language to change the language of the content. In this example, the UI of the editor will be in English but the content will be in Arabic:

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        language: {
            // The UI will be English.
            ui: 'en',

            // But the content will be edited in Arabic.
            content: 'ar'
        }
    } )
    .then( editor => {
        window.editor = editor;
    } )
    .catch( err => {
        console.error( err.stack );
    } );

# Demo

# List of available professional translations

Arabic	Bengali	Bulgarian	Catalan
Chinese (China)	Chinese (Taiwan)	Czech	Danish
Dutch	English (American)	Estonian	Finnish
French	German	Greek	Hebrew
Hindi	Hungarian	Indonesian	Italian
Japanese	Korean	Latvian	Lithuanian
Malay	Norwegian	Polish	Portuguese (Brazilian)
Portuguese	Romanian	Russian	Serbian
Slovak	Spanish	Swedish	Thai
Turkish	Ukrainian	Vietnamese

There are community translations available for Australian and British variations of English, too, as well as various others.

# Related features

Other features that will help you control the content language:

• Text part Language – Set the language of the selected content part to support multilingual texts.