close

Filter

Studio Developer Manual / Version 2412.0
Table Of Contents

If customizing CKEditor 5, you most likely also want to apply corresponding localized labels. The approach differs, depending on whether you want to apply localization to custom CKEditor 5 plugins or to apply localization as part of the configuration of CKEditor 5 instances within CoreMedia Studio.

Set Locale at CKEditor 5 Instantiation:

CKEditor 5 has a configuration option language. Upon instantiation, you have to forward the locale to CKEditor 5 as retrieved via LocaleUtil.getLocale() similar to the example in Example 10.2, “CKEditor 5 Instance Localization”.

import LocaleUtil from
  "@coremedia/studio-client.cap-base-models/locale/LocaleUtil";

const language = LocaleUtil.getLocale();

ClassicEditor.create(domElement, {
  language,
});

Example 10.2. CKEditor 5 Instance Localization


Plugin Localization

Localizing UI elements within custom plugins is best done via the translation-service as described in the Localization guide for CKEditor 5. This localization will then automatically apply the locale as configured at instantiation of the CKEditor 5 instance.

Configuration Localization

As can be seen in the example included in Section “Image Styles Configuration”, it may be required to apply localization while configuring CKEditor 5 plugins, for example. The best practice to apply can be seen in ckeditorDefault.ts (see Section 10.3.1, “Best Practice: ckeditorDefault.ts”). It boils down to using the localization object and localize function provided by LocalizationUtils. In Example 10.3, “Using LocalizationUtils” you can see a rough sketch, on how to apply these localizations.

import { localization, localize } from
  "@coremedia-blueprint/studio-client.ckeditor5/lang/LocalizationUtils";
import LocaleUtil from
  "@coremedia/studio-client.cap-base-models/locale/LocaleUtil";

localization.add({
  "de": {
    "Type your text here...": "Text hier eingeben..."
  }
});

const language = LocaleUtil.getLocale();

ClassicEditor.create(domElement, {
  placeholder:
    localize("Type your text here...", language),
  language,
});

Example 10.3. Using LocalizationUtils


Was this article useful?

Search Results

Table Of Contents
warning

Your Internet Explorer is no longer supported.

Please use Mozilla Firefox, Google Chrome, or Microsoft Edge.