Rich-Text

This content is for v1.0. Switch to the latest version for up-to-date documentation.

Übersicht

Der Rich-Text bietet einen vollständigen Rich-Text-Editor für formatierte Inhalte. Mit Formatierungsoptionen, Textausrichtung und Bildunterstützung ist er perfekt für die Erstellung detaillierter Inhalte wie Artikel, Blog-Posts oder umfassende Informationsseiten.

Felder

Aktiv

Typ: Boolean
Erforderlich: Nein (Standard: aktiv)
Zweck: Steuert, ob der Rich-Text-Bereich auf der Website angezeigt wird.
Deaktivieren Sie dieses Feld, wenn der Inhalt vorbereitet, aber noch nicht live sein soll.

Inhalt

Typ: Array
Erforderlich: Nein
Zweck: Array von Block-Elementen und Medien

Unterstützte Block-Typen

Text-Blöcke

Typ: Block
Zweck: Standard-Text-Blöcke mit Formatierungsoptionen
Verfügbare Formatierung:
- Strong (strong) – Fetter Text
- Emphasis (em) – Kursiver Text
- Textausrichtung:
  - Links – Linksbündig
  - Zentriert – Zentriert
  - Rechts – Rechtsbündig

Bilder

Typ: Bild
Zweck: Bilder, die in den Inhalt eingebettet sind
Optionen: Hotspot aktiviert
Felder:
- Alternativtext (String, erforderlich) – Wichtig für Barrierefreiheit und SEO
- Bildunterschrift (String, optional) – Optionale Bildunterschrift
- Bildunterschrift-Link (URL, optional) – Optionaler Link, mit dem die Bildunterschrift auf eine externe Seite verweist (z. B. Quellenangabe oder weiterführende Informationen)

Videos

Typ: Objekt
Zweck: Einbettung von einzelnen Videos innerhalb des Textes
Felder:
- Video-Datei (videoFile, File, optional) – Hochgeladene Videodatei (video/*)
- Video-URL (Alternative) (videoUrl, URL, optional) – Direkte Video-URL als Alternative zum Upload (z. B. CDN-Link)
- Poster-Bild (poster, Image, optional) – Vorschaubild, das vor dem Abspielen angezeigt wird (mit Hotspot-Unterstützung)
- Bildunterschrift (caption, String, optional) – Optionale Beschreibung oder Titel des Videos
- Bildunterschrift-Link (captionLink, URL, optional) – Optionaler Link für weiterführende Informationen oder Quellenangaben

Bild-Slider

Typ: Objekt
Zweck: Einbettung eines Bild-Sliders innerhalb des Rich-Text-Inhalts
Struktur:
- imageSlider (imageSlider, Typ: imageSliderSectionTwo) – Referenz auf den vordefinierten Bild-Slider-Typ mit mehreren Slides
Hinweis: Die eigentlichen Slider-Einstellungen (z. B. Slides, Bilder, Beschriftungen) werden im verknüpften imageSliderSectionTwo-Schema gepflegt.

Verwendungsbeispiel

Typische Konfiguration

Inhalt:
1. Text-Block: Willkommen bei unserem Unternehmen (Formatierung: Strong, Zentriert)
2. Bild:
  - Bild: Modernes Bürogebäude
  - Alt-Text: Modernes Bürogebäude mit nachhaltigen Features
  - Bildunterschrift: Unser Unternehmen bietet moderne Dienstleistungen mit nachhaltigen Praktiken
3. Text-Block: Wir bieten professionelle Dienstleistungen für alle Ihre Bedürfnisse. Unsere erfahrenen Teammitglieder sind hier, um Ihnen zu helfen, Ihre Ziele zu erreichen. (Formatierung: Links)
4. Text-Block: Unsere Vorteile: (Formatierung: Strong)
5. Text-Block: - Moderne Lösungen\n- Flexible Terminplanung\n- Erfahrenes Team\n- Bewährte Erfolgsbilanz (Formatierung: Links)

Best Practices

Struktur: Verwenden Sie Strong-Formatierung für Überschriften innerhalb des Textes
Bilder: Füllen Sie immer Alt-Text für Barrierefreiheit und SEO aus
Textausrichtung: Verwenden Sie zentrierte Ausrichtung sparsam, hauptsächlich für Überschriften
Lesbarkeit: Teilen Sie lange Text-Blöcke in mehrere Absätze auf
Bildunterschriften: Verwenden Sie Bildunterschriften, um zusätzlichen Kontext zu bieten
Formatierung: Verwenden Sie konsistente Formatierung für bessere Lesbarkeit

Hauptmerkmale

Flexible Struktur: Kombination aus Text und Bildern in beliebiger Reihenfolge
Rich-Text-Editor: Vollständiger Editor mit Formatierungsoptionen
Textausrichtung: Inline-Ausrichtung als Mark/Dekorator
Bildunterstützung: Bilder mit Hotspot, Alt-Text, Bildunterschrift und optionalem Link in der Bildunterschrift
Video-Unterstützung: Einbettung von Videos per Datei-Upload oder externer URL inkl. Poster-Bild und optionaler Bildunterschrift
Bild-Slider-Unterstützung: Integration eines Bild-Sliders (imageSliderSectionTwo) direkt im Fließtext
Barrierefreiheit: Alt-Text für Bilder ist wichtig für Screenreader
Vollständige Formatierung: Unterstützung für fett, kursiv und Ausrichtungsoptionen

Wo es verwendet wird

Seiten
Allgemeine Inhaltsseiten
Artikel
Als Hauptinhalt-Feld
Rechtliche Seiten
Als Teil des Inhalts-Arrays
Autoren
Für Biografien

Technische Hinweise

Inhalt verwendet blockbasierte Struktur für flexible Komposition
Bilder unterstützen Hotspot-Bearbeitung für besseres Zuschneiden
Videos können entweder als Datei (file) oder über eine direkte URL (url) eingebunden werden
Video-Poster werden als image-Feld mit Hotspot-Unterstützung verwaltet
Textausrichtung wird als Inline-Dekoratoren angewendet
Alt-Text ist für Barrierefreiheits-Compliance erforderlich
Der Bereich unterstützt vollständige Rich-Text-Formatierungsmöglichkeiten

Unterschiede zu anderen Inhaltsblöcken

Feature	Rich-Text	Text mit Medien	Accordion
Überschrift-Feld	Nein	Ja	Ja
Beschreibungs-Feld	Nein	Ja	Ja
Hintergrundfarbe	Nein	Ja	Ja
Inhaltsstruktur	Flexibles Array	Strukturierte Elemente (1-10)	Strukturierte Elemente
Text-Editor	Ja (vollständig)	Ja (pro Element)	Ja (pro Element)
Formatierung	Ja (Strong, Em)	Ja (via richTextSection)	Ja (via richTextSection)
Textausrichtung	Ja (Links/Zentriert/Rechts)	Nein	Nein
Bilder	Ja (inline)	Ja (strukturiert)	Nein
Medientypen	Bilder/Video/Bild-Slider	Bild/Galerie/Video/Slider	Nein
Layout-Optionen	Nein	Ja (3 Typen)	Nein
Icons	Nein	Nein	Ja (Lucide Icons)
Erweiterbare Elemente	Nein	Nein	Ja
Verwendung	Fließender Text	Text-Medien-Kombinationen	Erweiterbare Q&Ae