Локализация

Виджет Editor поддерживает локализацию, позволяя разработчикам отображать метки, сообщения и подсказки на разных языках. Эта функция необходима в приложениях, ориентированных на пользователей, говорящих на разных языках. Локализация выполняется путём настройки виджета с пользовательским набором переводов.

Библиотека предоставляет три встроенные локали:

• Китайский
• Английский
• Немецкий

Вы также можете применить пользовательскую локаль.

Локаль по умолчанию

По умолчанию применяется английская локаль:

Применение локалей

Чтобы применить встроенную локаль, импортируйте объект Locale из "@svar-ui/svelte-core", пакет локали из "@svar-ui/core-locales" и встроенную локаль из "@svar-ui/editor-locales", затем добавьте атрибут words для нужного языка в тег Locale.

Пример:

import { Locale } from "@svar-ui/svelte-core";
import { cn } from "@svar-ui/editor-locales";
import { cn as cnCore } from "@svar-ui/core-locales";

<Locale words={{ ...cn, ...cnCore }}>

Приведённая конфигурация позволяет виджету Editor отображать текст на немецком языке. Объект myLang содержит пары ключ-значение, где ключами являются строки по умолчанию на английском языке, используемые в Editor, а значениями — их переводы на немецкий. Компонент Locale оборачивает Editor и применяет указанные переводы.

<script>
   import { Locale } from "@svar-ui/svelte-core";
   import { Editor } from "@svar-ui/svelte-editor";

  const myLang = {
   "This field is required": "Dieses Feld ist erforderlich",
   "Invalid value": "Ungültiger Wert",
   Yes: "Ja",
   No: "Nein",
   Save: "Speichern",
   Cancel: "Abbrechen",
};
</script>

<Locale words={{ editor:myLang }}>
  <Editor />
</Locale>

Чтобы применить пользовательскую локаль, необходимо создать объект для неё (или изменить существующий) и предоставить переводы для всех текстовых меток Editor (на любом нужном языке). Также необходимо добавить метки из компонентов core и calendar ("@svar-ui/core-locales"). Подробнее см. в разделе Локализация Core.

Пример для корейского языка:

const ko = {
   editor: {
      "Invalid value": 잘못된 값,
      // other
   },
   core:{ ... },
   calendar: { ... }
};

Связанный пример: Locales