Zum Hauptinhalt springen

Installation und Initialisierung

Installation​

Um die Svelte Editor-Bibliothek zu installieren, führen Sie folgenden Befehl aus:

//npm
npm install @svar-ui/svelte-editor

//yarn
yarn add @svar-ui/svelte-editor
note

Das Paket wurde von wx-svelte-editor zu @svar-ui/svelte-editor migriert. Wir veröffentlichen wx-svelte-editor weiterhin bis zum Svelte SVAR 3.0-Update

Initialisierung​

Das Editor-Widget bietet flexible Optionen zur Initialisierung, mit denen Entwickler Eingabefelder definieren, Werte vorausfüllen und das Widget im bearbeitbaren oder schreibgeschützten Modus einrichten können. Es unterstützt eine Vielzahl von Konfigurationen für unterschiedliche Anwendungsfälle.

Das Editor-Widget initialisieren​

Der Editor verfügt über integrierte Controls: "text", "textarea", "checkbox", "section" und "readonly".

Um weitere Controls zu verwenden, müssen Sie diese aus der @svar-ui/svelte-core-Bibliothek importieren und als Editor-Elemente mit dem entsprechenden registerEditorItem-Helper registrieren:

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

   const items = [
      { comp: "text", key: "name", label: "Name" },
      {
        comp: "textarea",
        key: "descr",
        label: "Description"
      },
      { comp: "checkbox", key: "admin", label: "Is Admin" }
   ];

   const values = {
      name: "John Doe",
      descr: "Lorem ipsum dolor sit amet",
      admin: true,
      role: "admin"
   };
</script>

<Editor {items} {values} />

Dieses Beispiel zeigt, wie das Editor-Widget mit einer Liste von Eingabefeldern und den dazugehörigen Werten initialisiert wird. Das items-Array definiert die Struktur des Formulars, wobei jedes Objekt den Eingabetyp (comp), einen eindeutigen Schlüssel (key) und ein benutzerfreundliches Label (label) angibt. Das values-Objekt stellt Anfangswerte für diese Eingaben bereit, die über ihre Schlüssel zugeordnet werden. Diese Konfiguration eignet sich für die Erstellung eines einfachen Formulars mit vorgeladenen Daten, beispielsweise beim Bearbeiten eines bestehenden Datensatzes.

Das Editor-Widget im schreibgeschützten Modus initialisieren​

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

   const items = [
      { comp: "text", key: "name", label: "Name" },
      {
        comp: "textarea",
        key: "descr",
        label: "Description",
      },
      { comp: "checkbox", key: "admin", label: "Is Admin" }
   ];
   const values = {
      name: "John Doe",
      descr: "Lorem ipsum dolor sit amet",
      admin: true,
      role: "admin"
   };
</script>

<Editor {items} {values} readonly={true} />

Dieses Beispiel zeigt, wie das Editor-Widget im schreibgeschützten Modus initialisiert wird. Die readonly-Eigenschaft wird auf true gesetzt, wodurch Benutzer die Eingabefelder nicht bearbeiten können. Das items-Array und das values-Objekt werden genauso definiert wie im bearbeitbaren Modus. Diese Konfiguration ist ideal für Szenarien, in denen Formulardaten angezeigt werden sollen, ohne Änderungen zu erlauben, etwa in einer Prüf- oder Auditoberfläche.

readonly

Vollständiger Initialisierungscode​

Um das Widget in Aktion zu sehen, fügen Sie einige Elemente hinzu.

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

  const items = [
   { comp: "text", key: "name", label: "Name" },
   { comp: "text", key: "descr", label: "Description" },
   { comp: "text", key: "role", label: "Role" }
  ];

  const values = {
   name: "John Doe",
   descr: "Lorem ipsum dolor sit amet",
   role: "admin"
  };
</script>

<Willow>
  <Editor {items} {values} />
</Willow>
hinweis

Um eine korrekte Initialisierung sicherzustellen, wird empfohlen, ein Theme auf der obersten Ebene Ihrer Anwendung anzuwenden. Wenn Sie die Editor-Komponente eigenständig verwenden, vergessen Sie nicht, sie in ein Theme einzubetten (im obigen Beispiel wird Willow verwendet).

Visuelle Themes​

Das Widget wird in zwei visuellen Stilen bereitgestellt – Hell und Dunkel – die über das Theme-Tag gesteuert werden.

<script>
import { Willow, WillowDark } from "@svar-ui/svelte-core";
</script>

<!-- Light -->
<Willow>
  <Editor />
</Willow>

<!-- Dark -->
<WillowDark>
  <Editor />
</WillowDark>