Das WYSIWYG-Feld stellt Benutzern einen fortschrittlichen Richt-Text-Editor mit vielfältigen Möglichkeiten auf Basis des ProseMirror-Frameworks zur Verfügung. So können nicht nur Texte formatiert, sondern auch benutzerdefinierte Elemente (z.B. Bildergalerie) zur Verfügung gestellt und durch die Benutzer genutzt werden.
Der Hauptvorteil des WYSIWYG-Feldes ist seine flexible Integration, sowohl in einfacher als auch in komplexer Form. Als Entwickler kannst du entweder den direkt nutzbaren HTML-Code-Output des WYSIWYG-Feldes verwenden oder für eine tiefere Integration in dein Projekt die JSON-Ausgabe heranziehen. Dadurch lässt sich der Inhalt präzise an die spezifischen Anforderungen eines Projekts anpassen.
WYSIWYG-Feld im Headless-Kontext
In Flyo werden alle Einträge (Inhalte) unabhängig vom jeweiligen Ausgabekanal verwaltet. Das bedeutet, dass in den Feldern der Entitäten keine Informationen gespeichert werden, die spezifisch für das Styling eines Ausgabekanals (z.B. Webseite, Digital Signage-Screen oder Newsletter) sind.
Eine Webseite stellt beispielsweise ein Bild anders dar als ein Newsletter. Deshalb sollten Styling-Informationen nicht Teil der Einträge (Inhalte) in Flyo sein. Mit Flyo kannst du deshalb benutzerdefinierte Elemente für den WYSIWYG-Editor erstellen, die durch den Nutzer eingefügt werden können. Diese Elemente enthalten die relevanten Informationen (z.B. für einen Bilder-Slider), während im jeweiligen Ausgabekanal (z.B. die Webseite) definiert ist, wie das Element dargestellt wird.
Informationen aus WYSIWYG-Felder können entweder im JSON-Format oder im HTML-Format abgerufen werden. Während das JSON-Objekt einzig die Informationen enthält, liefert die HTML-Ausgabe auf Wunsch eine Grundform des Stylings mit.
Beispiele folgen.
Benutzerdefinierte Elemente
Ein benutzerdefiniertes Element ist ein selbst erstelltes Element, das über die Grundfunktionalität des Richt-Text-Editors hinausgeht. Als Entwickler kannst du die Eigenschaften des Elements definieren und die Darstellung seines Inhalts im HTML-Code steuern. Der Benutzer des Richt-Text-Editors kann das Element über einen Einfügen-Button im Editor seinem Inhalt hinzufügen. Diese benutzerdefinierten Elemente ermöglichen es, den Editor um komplexe Inhalte zu erweitern, die von der Frontend-Ausgabe unterstützt werden.
Beispiele für benutzerdefinierte Elemente
- Video-Embed-Elemente: YouTube, Vimeo oder andere Videoquellen, die direkt in den Text eingebettet werden können.
- Bilderkarussells: Interaktive Diashows, die mehrere Bilder in einem rotierenden Format anzeigen.
- Interaktive Karten: Google Maps oder andere Kartendienste, die benutzerdefinierte Markierungen und Routen anzeigen können.
- Produktkataloge: Spezifische Layouts für die Darstellung von Produkten mit Bild, Beschreibung, Preis und Bewertungsoptionen.
- Umfragen und Quizze: Interaktive Formulare, die Benutzerfeedback sammeln oder Wissen testen.
- Benutzerdefinierte Widgets: Beispielsweise Wetter-Widgets, Aktienkurse oder Echtzeitdaten von APIs.
- Formulare: Benutzerdefinierte Kontakt- oder Anmeldeformulare, die direkt im Text eingebettet werden können.
- Code-Snippets: Formatierte Codeblöcke für technische Dokumentationen oder Blogposts.
Diese benutzerdefinierten Elemente erweitern die Möglichkeiten des Flyo WYSIWYG-Editors erheblich und bieten Entwicklern und Nutzern flexible, anpassbare und interaktive Inhalte.
Hinzufügen von benutzerdefinierten Elementen zum Richt-Text-Editor
Benutzerdefinierte Elemente können für jedes Feld mit dem Feldtyp "Text Editor" definiert werden. Dies geschieht über Einstellungen → Entitäten → Entität X → Felder → Einstellungen. Dabei hast du die Flexibilität, für jedes WYSIWYG-Feld eigene benutzerdefinierte Elemente zu definieren. Unterschiedliche Entitäten können also auch unterschiedliche benutzerdefinierte Elemente enthalten.
Das folgende Bild illustriert den Prozess der Erstellung eines benutzerdefinierten Elements:
- (1) Als Eigenschaften des Elements gelten HTML-Attribute, die verschiedene Feldtypen wie Text, mehrzeiligen Text, Bild, Bilder, Datum, Farbe, Checkbox, Radio, Select und weitere umfassen können.
- (2) Der Name des Elements ist für die Verwendung im JSON-Code essentiell. Er muss einzigartig sein und darf keine Leerzeichen beinhalten.
Für die Definition der HTML-Ausgabe wird das Template-System Latte verwendet. Hierbei können alle Attribute mit {$name} angesprochen werden. Die so erstellte HTML-Ausgabe ersetzt dann das Element im HTML-Code. Dies ermöglicht die Verwendung komplexer benutzerdefinierter Elemente selbst in Ausgabekanälen mit einfacher HTML-Struktur. In diesem Abschnitt findest du Informationen zur Template Engine von Flyo.
Hinweis:
Bei der Arbeit mit den Eigenschaftstypen Bilder oder Dateien ist die Verwendung einer foreach-Schleife erforderlich:
<div>
{foreach $images as $image}
{if $image}
<img src="{$image}" alt="{$image}" />
{/if}
{/foreach}
</div>Einfügen eines benutzerdefinierten Elements im Editor
Das oben definierte Element wird im Editor folgendermassen dargestellt:
- (1) Das Element wird durch Klicken auf den "Einfügen"-Knopf hinzugefügt.
- (2) Die definierten Optionen werden angezeigt und können vom Benutzer bearbeitet werden.
Die JSON und HTML Ausgabe in einer Integration sieht dann wie folgt aus:
JSON:
{
"type": "doc",
"content": [
{
"type": "paragraph",
"content": [
{
"type": "text",
"text": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. "
}
]
},
{
"type": "Images",
"attrs": {
"images": [
{
"source": "https://storage.flyo.cloud/img1_0ae75102.png",
"caption": null,
"copyright": null,
"name": "img1.png"
},
{
"source": "https://storage.flyo.cloud/img2_98928571.png",
"caption": null,
"copyright": null,
"name": "img2.png"
}
],
"title": "This is the gallery title"
}
},
{
"type": "paragraph",
"content": [
{
"type": "text",
"text": "Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet"
}
]
}
]
}Html:
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. </p>
<div>
<h3>This is the gallery title</h3>
<img src=\"https://storage.flyo.cloud/img1_0ae75102.png\" />
<img src=\"https://storage.flyo.cloud/img2_98928571.png\"/>
</div>
<p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet</p>Rekursive Inhalteingabe
Falls die Notwendigkeit besteht, den WYSIWYG-Editor dynamisch weiterhin innerhalb des Content-Elements zu nutzen, kann diese Option aktiviert werden. Dadurch kann der Benutzer die Funktionalität und Bequemlichkeit des Editors innerhalb des Elements weiterhin nutzen und sogar zusätzliche benutzerdefinierte Elemente einfügen oder verschachteln:
- (1) Die Option für die rekursive Inhalteingabe wird aktiviert.
- (2) In der HTML-Ausgabe steht nun die vordefinierte Variable {$content} zur Verfügung, die den Inhalt des Elements enthält.
- (1) Das Content-Element wird nun im Editor angezeigt und kann bearbeitet werden. Durch die aktivierte Option Rekursive Inhalteingabe kann der Benutzer weiterhin Inhalte eingeben, wie er es gewohnt ist, einschließlich Formatierungen. Es ist sogar möglich, weitere benutzerdefinierte Elemente einzufügen, also eine Verschachtelung vorzunehmen.
- (2) Ein weiteres benutzerdefiniertes Element wurde als Rekursion eingefügt.
Die JSON und HTML Ausgabe in einer Integration sieht dann wie folgt aus:
JSON:
{
"type": "doc",
"content": [
{
"type": "paragraph",
"content": [
{
"type": "text",
"text": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. "
}
]
},
{
"type": "InfoBox",
"attrs": {
"author": "Flyo System"
},
"content": [
{
"type": "paragraph",
"content": [
{
"type": "text",
"text": "Hier ist es mglich auch WYSIWYG Funktionalität zu verwenden wie "
},
{
"type": "text",
"marks": [
{
"type": "bold"
}
],
"text": "Fett"
},
{
"type": "text",
"text": " oder "
},
{
"type": "text",
"marks": [
{
"type": "italic"
}
],
"text": "Kursiv"
},
{
"type": "text",
"text": ", oder sogar andere Custom Element:"
}
]
},
{
"type": "Images",
"attrs": {
"images": [
{
"source": "https://storage.flyo.cloud/img1_0ae75102.png",
"caption": null,
"copyright": null,
"name": "img1.png"
}
],
"title": "Gallery Custom Element"
}
}
]
},
{
"type": "paragraph",
"content": [
{
"type": "text",
"text": "Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet"
}
]
}
]
}HTML:
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. </p>
<div class=\"infobox\">
<p>Hier ist es mglich auch WYSIWYG Funktionalität zu verwenden wie <strong>Fett</strong> oder <em>Kursiv</em>, oder sogar andere Custom Element: </p>
<div>
<h3>Gallery Custom Element</h3>
<img src=\"https://storage.flyo.cloud/img1_0ae75102.png\" alt=\"https://storage.flyo.cloud/img1_0ae75102.png\" />
</div>
<p>Autor: Flyo System</p>
</div>
<p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet</p>Ausgabe in Integrationen
Integrationen wie Nitro CMS oder der API SDK liefern für ein WYSIWYG-Feld immer ein Objekt, das beide Formate enthält: HTML und JSON:
{
"html": "<p>...</p>",
"json": {
"type": "doc",
"content": [
{
"type": "paragraph",
"content": [
{
"type": "text",
"text": "..."
}
]
}
]
}
}Der JSON-Output kann mit jeder ProseMirror-kompatiblen Library verarbeitet werden. Flyo bietet bereits fertige Libraries für JavaScript und PHP an.
So kannst du flexibel wählen, ob du mit HTML oder JSON arbeiten möchtest, abhängig von den Anforderungen deines Projekts.