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,
});

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,
});