Localization

import CreativeEditorSDK from 'https://cdn.img.ly/packages/imgly/cesdk-js/1.51.0/index.js';

const config = {
  license: 'mtLT-_GJwMhE7LDnO8KKEma7qSuzWuDxiKuQcxHKmz3fjaXWY2lT3o3Z2VdL5twm',
  userId: 'guides-user',
  locale: 'fr',
  i18n: {
    fr: {
      'common.back': 'Retour',
      'meta.currentLanguage': 'Français'
    },
    it: {
      'common.back': 'Indietro',
      'meta.currentLanguage': 'Italiano'
    }
  },
  ui: {
    elements: {
      navigation: {
        action: {
          back: true // Enable 'Back' button to show translation label.
        }
      },
      panels: {
        settings: true // Enable Settings panel for switching languages.
      }
    }
  },
  callbacks: { onUpload: 'local' } // Enable local uploads in Asset Library.
};

CreativeEditorSDK.create('#cesdk_container', config).then(async (instance) => {
  // Populate the asset library with default / demo asset sources.
  instance.addDefaultAssetSources();
  instance.addDemoAssetSources({ sceneMode: 'Design' });
  await instance.createDesignScene();

  const currentLocale = instance.i18n.getLocale();
  console.log({ currentLocale }); // Output: "fr"

  instance.i18n.setLocale('it');
  const updatedLocale = instance.i18n.getLocale();
  console.log({ updatedLocale }); // Output: "it"

  instance.i18n.setTranslations({
    hr: {
      'common.back': 'Poništi',
      'meta.currentLanguage': 'Hrvatski'
    },
    sv: {
      'common.back': 'Ångra',
      'meta.currentLanguage': 'Svenska'
    }
  });
});

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <style>
      body {
        margin: 0;
        overflow: hidden;
      }
      html {
        overscroll-behavior-x: contain;
      }
    </style>
  </head>

  <body>
    <div id="cesdk_container" style="width: 100%; height: 100vh"></div>
    <script type="module" src="index.js">
    </script>
  </body>
</html>

The CE.SDK editor includes an internationalization API that facilitates locale configuration management during runtime.

I18N Configuration

locale: string defines the default language of the user interface. This can later be changed in the editor customization panel. The CE.SDK currently ships with locales for English en and German de. Additional languages will be available in the future. Until then, or if you want to provide custom wording and translations, you can provide your own translations under the i18n configuration option, as described in the next paragraph.

locale: 'fr',

i18n: Object is a map of strings that define the translations for multiple locales. Since the CE.SDK supports maintaining multiple locales at the same time, the first key in the map must always be the locale the translation is targeting. In this example, we change the back-button label for the locales 'fr' and 'it'.

Please note that the fallback locale is 'en'. So, with this configuration, the complete user interface would be English except for the back-button. Also, if you want to change a single label for one of our shipped translations, you do not have to add all keys, but only the one you want to override.

A detailed overview of all available keys can be found in form of predefined language files inside assets/i18n. You can download the English version from our CDN here: en.json

i18n: {
  fr: {
    'common.back': 'Retour',
    'meta.currentLanguage': 'Français'
  },
  it: {
    'common.back': 'Indietro',
    'meta.currentLanguage': 'Italiano'
  }

Under the special key meta.currentLanguage, you should provide a short label for your provided language. This will be used to display the language in the language select dropdown of the editor customization panel.

'meta.currentLanguage': 'Français'

Here’s the full code:

const config = {
  license: 'mtLT-_GJwMhE7LDnO8KKEma7qSuzWuDxiKuQcxHKmz3fjaXWY2lT3o3Z2VdL5twm',
  userId: 'guides-user',
  locale: 'fr',
  i18n: {
    fr: {
      'common.back': 'Retour',
      'meta.currentLanguage': 'Français'
    },
    it: {
      'common.back': 'Indietro',
      'meta.currentLanguage': 'Italiano'
    }
  },
  ui: {
    elements: {
      navigation: {
        action: {
          back: true // Enable 'Back' button to show translation label.
        }
      },
      panels: {
        settings: true // Enable Settings panel for switching languages.
      }
    }
  },
  callbacks: { onUpload: 'local' } // Enable local uploads in Asset Library.
};

I18N API

Internationalisation can also be handled during runtime with a complementary set of APIs.

cesdk.i18n.getLocale(): string returns the currently set locale string, e.g. "en" for our default english locale.

const currentLocale = instance.i18n.getLocale();
console.log({ currentLocale }); // Output: "fr"

cesdk.i18n.setLocale(locale: string) updates the locale to the string passed in as locale parameter. This is either one of our predefined strings ("en" for english or "de" for german) or any additionally configured locales.

instance.i18n.setLocale('it');
const updatedLocale = instance.i18n.getLocale();
console.log({ updatedLocale }); // Output: "it"

cesdk.i18n.setTranslations(definition: { [locale: string]: object }) adds an object with translations to CE.SDK. This has the same format as the above described i18n configuration object.

instance.i18n.setTranslations({
  hr: {
    'common.back': 'Poništi',
    'meta.currentLanguage': 'Hrvatski'
  },
  sv: {
    'common.back': 'Ångra',
    'meta.currentLanguage': 'Svenska'
  }
});