tibi-docs/docs/projektkonfig/collections/fields/widgets/contentbuilder.md

35 lines
1.9 KiB
Markdown
Raw Normal View History

2022-11-21 10:33:21 +01:00
# contentbuilder
> Der ContentBuilder ist ein Drittanbieter-Produkt und steht nicht in jeder Lizenz zur Verfügung. Bitte kontaktieren Sie uns, wenn Sie Interesse an diesem Widget haben.
Für die Gestaltung von HTML-Inhalten ist der ContentBuilder eine einfache und intuitive Lösung. Es sind Layout-Hilfmittel wie Spalten und Zeilen ebenso verfügbar, wie die Möglichkeit Dateien (Bilder, Video, Downloads) direkt in den HTML-Code einzubinden.
Wie der ContentBuilder an einem Feld konfiguriert wird verdeutlicht folgendes Beispiel:
!!!include(api/collections/fields/content.yml)!!!
## Mediathek Kollektion
2022-11-21 10:56:00 +01:00
<video width="100%" controls autoplay muted loop>
<source src="contentbuilder-medialib.webm" type="video/webm">
</video>
2022-11-21 10:33:21 +01:00
Wie aus der obigen Definition unterhalb von z.B. "imageSelect" zu lesen, bedarf es einer eigenen Kollektion für Bilder und andere Dateien. Diese Kollektion könnte wie folgt aussehen:
2022-11-21 10:56:00 +01:00
> Die Bedeutung der hier nicht beschriebenen Eigenschaften ist unter [collections](./../../../collections.md) zu finden.
2022-11-21 10:33:21 +01:00
!!!include(api/collections/medialib.yml)!!!
## Module (customTags)
Die Einbindung des konfigurierten Beispiel-Moduls aus obiger Definition erfolgt im ContentBuilder wie im folgenden Video zu sehen ist:
<video width="100%" controls autoplay muted loop>
<source src="contentbuilder-module.webm" type="video/webm">
</video>
Wie oben schon erwähnt, sind die `placeholder` frei wählbar. Eine HTML5-Schreibweise bietet sich aber sowohl für das Styling, als auch für die spätere Einbindung in ein Frontend an.
In unserem Beispiel hier wurden zusättzlich zum eigentlichen Modul-Tag noch Attribute (`title` und `description`) definiert. Diese können dann im Frontend das eigentliche Modul beeinflussen.
Im Frontend könnte ein Modul dann später als "Custom Element" implementiert werden oder es wird ein HTML-Parser verwendet, der die Tags durch eigene Komponenten ersetzt, wie er im Anhang [TODO] zu finden ist.