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 die Locale-Komponente aus @svar-ui/react-core, das Locale-Paket aus @svar-ui/core-locales und ein integriertes Locale aus @svar-ui/editor-locales, und fügen Sie dann den words-Prop für die gewünschte Sprache zur Locale-Komponente hinzu.

Beispiel:

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

export default function App() {
  return (
    <Locale words={{ ...cn, ...cnCore }}>
      <Editor />
    </Locale>
  );
}

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.

import { Locale } from "@svar-ui/react-core";
import { Editor } from "@svar-ui/react-editor";
import "@svar-ui/react-editor/all.css";

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

export default function App() {
  return (
    <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 editor translations...
  },
  core: { /* ... core translations ... */ },
  calendar: { /* ... calendar translations ... */ },
};

Verwandtes Beispiel: Locales