CKEditor Ecosystem Documentation
Search
Contribute to this guide
Home/CKEditor 5/Features

Text part language

The text part language feature lets you mark the language of text fragments. This way browsers and screen readers can correctly interpret parts written in different languages.

# Demo

In the demo below, select a text fragment. Next, use the language toolbar dropdown to choose from predefined languages.

Language is the human ability to acquire and use complex systems of communication, and language is any specific example of such a system. The scientific study of language is called linguistics.

שפה היא דרך תקשורת המבוססת על מערכת סמלים מורכבת בעלת חוקיות, המאפשרת לקודד ולארגן מידע בעל משמעויות רבות ומגוונות. נהוג להבדיל בין הסמל השפתי המסמן לבין המושג או התוכן המסומן בו, אשר יכול להיות מציאותי או מופשט.

Un lenguaje (del provenzal lenguatge y este del latín lingua) es un sistema de comunicación estructurado para el que existe un contexto de uso y ciertos principios combinatorios formales. Existen contextos tanto naturales como artificiales.

اللغة نسق من الإشارات والرموز، يشكل أداة من أدوات المعرفة، وتعتبر اللغة أهم وسائل التفاهم والاحتكاك بين أفراد المجتمع في جميع ميادين الحياة. وبدون اللغة يتعذر نشاط الناس المعرفي.

Source: Wikipedia

This demo presents a limited set of features. Visit the feature-rich editor example to see more in action.

# Additional feature information

The text part language feature is especially useful when your content includes text sections written in different text directions, for example, when the whole content is in English but includes some citations in Arabic.

The text part language feature implements the WCAG 3.1.2 Language of Parts specification.

# Installation

⚠️ New import paths

Starting with version 42.0.0, we changed the format of import paths. This guide uses the new, shorter format. Refer to the Packages in the legacy setup guide if you use an older version of CKEditor 5.

After installing the editor, add the feature to your plugin list and toolbar configuration:

import { ClassicEditor, TextPartLanguage } from 'ckeditor5';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ TextPartLanguage, /* ... */ ],
        toolbar: [ 'textPartLanguage', /* ... */ ]
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

# Configuring available languages

To modify the list of available languages displayed in the language dropdown use the config.language.textPartLanguage configuration option.

The example below shows the configuration used for the demo above:

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        // More of editor's configuration.
        // ...
        language: {
            textPartLanguage: [
                { title: 'Arabic', languageCode: 'ar' },
                { title: 'French', languageCode: 'fr' },
                { title: 'Hebrew', languageCode: 'he' },
                { title: 'Spanish', languageCode: 'es' }
            ]
        }
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

There are other language-related CKEditor 5 features you may want to check:

# Common API

The TextPartLanguage plugin registers:

You can execute the command using the editor.execute() method:

// Applies the language to the selected text part with the given language code.
editor.execute( 'textPartLanguage', { languageCode: 'es' } );

We recommend using the official CKEditor 5 inspector for development and debugging. It will give you tons of useful information about the state of the editor such as internal data structures, selection, commands, and many more.

# Contribute

The source code of the feature is available on GitHub at https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-language.