Lokalisierung

Das Editor-Widget unterstützt Lokalisierung und ermöglicht es Entwicklern, Beschriftungen, Meldungen und Tooltips in verschiedenen Sprachen anzuzeigen. Diese Funktion ist für Anwendungen, die Benutzer unterschiedlicher Sprachen ansprechen, unerlässlich. Die Lokalisierung wird durch die Konfiguration des Widgets mit einem benutzerdefinierten Übersetzungssatz erreicht.

Die Bibliothek stellt drei integrierte Locales bereit:

• Chinesisch
• Englisch
• Deutsch

Sie können auch ein benutzerdefiniertes Locale anwenden.

Standard-Locale

Das englische Locale wird standardmäßig angewendet:

Locales anwenden

Um ein integriertes Locale anzuwenden, importieren Sie das Locale-Objekt aus @svar-ui/svelte-core, das Locale-Paket aus @svar-ui/core-locales und ein integriertes Locale aus @svar-ui/editor-locales, und fügen Sie dann das words-Attribut für die gewünschte Sprache zum Locale-Tag hinzu.

Beispiel:

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 }}>

Die folgende Konfiguration ermöglicht es dem Editor-Widget, Text auf Deutsch anzuzeigen. Das myLang-Objekt enthält Schlüssel-Wert-Paare, bei denen die Schlüssel die vom Editor verwendeten englischen Standardzeichenfolgen und die Werte deren deutsche Übersetzungen sind. Die Locale-Komponente umschließt den Editor und wendet die angegebenen Übersetzungen an.

<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>

Um ein benutzerdefiniertes Locale anzuwenden, müssen Sie ein Objekt für das benutzerdefinierte Locale erstellen (oder das vorhandene ändern) und Übersetzungen für alle Textbeschriftungen des Editors bereitstellen (in einer beliebigen Sprache). Sie müssen außerdem Beschriftungen der Komponenten core und calendar (@svar-ui/core-locales) hinzufügen. Weitere Details finden Sie unter Core-Lokalisierung.

Beispiel für die koreanische Sprache:

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

Verwandtes Beispiel: Locales