Локализация

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

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

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

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

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

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

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

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

Пример:

import { Locale } from "@svar-ui/vue-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 setup>
import { Locale } from "@svar-ui/vue-core";
import { Editor } from "@svar-ui/vue-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>

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

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

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

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

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