Contribute to this guideReport an issue

Setting Editor UI Language Documentation

CKEditor is translated into over 60 languages and by default, it is displayed in the user's language (as set in the browser or operating system settings). Additionally, the developer can also influence the choice of the editor UI language by using one of the following configuration options:

  • config.defaultLanguage – determines the UI language version that CKEditor will use if the user language is not available.
  • config.language – lets the developer define the default localization used for the editor instance that will override all user settings. If it is set, the editor UI will be displayed in this language disregarding any user preferences.

The editor example below is combined with an additional script that pulls the language list from the languages.js file (which includes a list of all supported editor localizations) and creates a drop-down list that can be used to change the UI language. Please note that this script is not necessary to add localizations to your CKEditor instance — in its default configuration CKEditor will always adjust the UI language to user's preferences. Refer to the Setting Editor User Interface Language article to learn more about this feature.

Check the Creating Multilingual Content sample to learn about setting text direction (LTR or RTL) and text part language for your content.

Available Localizations

The following language versions are available in CKEditor:

(You may see strange characters if your system does not support the selected language.)

Related Features

Get Sample Source Code

  • Setting editor UI language
                    <!doctype html>
    <html lang="en">
    
    <head>
      <meta charset="utf-8">
      <meta name="robots" content="noindex, nofollow">
      <title>Setting editor UI language</title>
      <script src="https://cdn.ckeditor.com/4.11.1/standard-all/ckeditor.js"></script>
    </head>
    
    <body>
      <textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href=&quot;https://ckeditor.com/&quot;&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
    
      <script>
        CKEDITOR.replace('editor1', {
          language: 'es'
        });
      </script>
    
    </body>
    
    </html>