Localizing CKEditor

This section is about localizing Ext JS components. For embedded richtext editing component CKEditor a different approach is required. For details, see Section 10.1.3.2, “Localizing CKEditor 5”.

Creating Resource Bundles

Text properties in CoreMedia Studio can be localized. English and German are supported out of the box; you can add your own localization bundles if required. To do so, proceed as follows:

Localized texts are stored in TypeScript classes as constants. The naming scheme of these files is:

<FileName>_<IsoLanguageCode>_properties.ts

A TypeScript properties class with no language code contains properties in the default language English. Note that English is only a technical default. The default locale used for users opening CoreMedia Studio for the first time is determined by the best match between their browser language settings and all supported locales.

When properties are missing in a locale-specific properties class or the complete properties class is missing, the values of the properties are inherited from the default language (that is, they will appear in English rather than in the locale the user has set).

Accessing Resource Bundles

Resource bundles can be accessed via the ResourceManager or by directly accessing the constant of the properties class:

import Config from "@jangaroo/runtime/Config";
import Panel from "@jangaroo/ext-ts/panel/Panel";
import MyPropertiesClass from "./MyPropertiesClass";

Config(Panel, {
    title: MyPropertiesClass.my_constant,
    //...
})

The ResourceManager can be accessed via the constant resourceManager (lower case) which has the type IResourceManager. It is mostly used when values of other property classes should be overwritten or a value from another language is should be read.

Overriding existing properties

If you want to change predefined labels, tooltips or similar, you can override properties from existing properties classes. To this end, you should first define a new properties class and then declare a CopyResourceBundleProperties inside the configuration section of your plugin rules. This plugin will copy all key-value-pairs from the source properties class to the target properties class, overwriting entries with the same keys.

import resourceManager from "@jangaroo/runtime/l10n/resourceManager";
import CopyResourceBundleProperties from "@coremedia/studio-client.main.editor-components/configuration/CopyResourceBundleProperties";
import SomeStudio_properties from "@coremedia/studio-client.main...";
import MyCustomized_properties from "./MyCustomized_properties";

// inside the 'configuration' property:
new CopyResourceBundleProperties({
  destination: resourceManager.getResourceBundle(null, SomeStudio_properties),
  source: resourceManager.getResourceBundle(null, MyCustomized_properties),
})

Generally, each Studio plugin module will contain at least one set of properties class for localizing its own components or for adapting existing properties classes.

For details on UI localization through properties classes see Section 9.4, “Localizing Labels”.