8declare(strict_types=1);
10$fieldsContent = file_get_contents(__DIR__ .
'/content/cms-fields-editor.html');
14 throw new RuntimeException(
'Tutorial-Inhalt konnte nicht geladen werden.');
18 array(
'cms_tree',
'cms-fields-01-content-tree-open.png',
'content-tree',
'Content Tree zur Seitenauswahl',
'Content CMS mit geöffnetem Content Tree zur Auswahl von Sprache, Ordner und Seite',
'Content Tree nur zur Auswahl öffnen und anschließend für die Bearbeitung wieder schließen.'),
19 array(
'cms_bar',
'cms-fields-02-bar-tree-closed.png',
'aktionsleiste',
'CMS-Kopfleiste und Seitenfelder',
'Content CMS mit geschlossenem Content Tree, vollständiger Kopfleiste und Seitenfeldern',
'Geschlossener Content Tree: aktuelle Seite, Kennzahlen, Aktionen und Seitenfelder bleiben übersichtlich.'),
20 array(
'cms_right',
'cms-fields-03-right-panel-tree-closed.png',
'rechte-spalte',
'Medien und Einstellungen',
'Rechte CMS-Spalte mit Hero, Gallery und Inline-Medien bei geschlossenem Content Tree',
'Hero, Gallery und Inline-Medien bearbeiten, während der Content Tree geschlossen bleibt.'),
21 array(
'cms_new',
'cms-fields-04-new-page-tree-closed.png',
'neue-seite',
'Neue CMS-Seite',
'Neu angelegte CMS-Seite mit neuer ID, Standardfeldern und geschlossenem Content Tree',
'Nach dem asynchronen Anlegen wird die neue Seite direkt zur Bearbeitung geladen.'),
25 array(
'editor_overview',
'editor-01-toolbar-overview.png',
'uebersicht',
'Editorleiste Übersicht',
'CMS-Editor mit geschlossenen Seitenleisten und vollständiger Editorleiste',
'Geschlossene Seitenleisten geben dem Editor die gesamte Arbeitsbreite.'),
26 array(
'editor_textformat',
'editor-02-textformat-menu.png',
'textformat',
'Textformatierung',
'Editor-Untermenü für Fett, Kursiv, Unterstrichen, Durchgestrichen und Ausrichtung',
'Textformatierung und Absatzausrichtung in einem gemeinsamen Menü.'),
27 array(
'editor_paragraph',
'editor-03-paragraph-menu.png',
'absatzformate',
'Absatzformate',
'Formatblock-Menü mit Absatz, Überschriften, Zitat und Code',
'Absatz, Überschriften, Zitat und Code bilden die semantische Inhaltsstruktur.'),
28 array(
'editor_bootstrap',
'editor-04-bootstrap-menu.png',
'bootstrap',
'Bootstrap-Komponenten',
'Bootstrap-Komponentenmenü mit Alert, Cards, Listen, CTA, Accordion, Tabs und Tabelle',
'Vorbereitete Komponenten an der Cursorposition einfügen und vollständig anpassen.'),
29 array(
'editor_markers',
'editor-05-marker-menu.png',
'marker',
'dbx-Bereichsmarker',
'dbx-Bereichsmarker für Hero, Header, Footer, Spalten und Druckseitenumbruch',
'Technische Marker trennen die vom Content-Template ausgewerteten Inhaltsbereiche.'),
30 array(
'editor_color',
'editor-06-color-menu.png',
'farben',
'Text- und Hintergrundfarben',
'Farbauswahl des Editors mit Hintergrund- und Textfarben',
'Hintergrund- und Textfarbe werden getrennt ausgewählt.'),
31 array(
'editor_link',
'editor-07-link-dialog.png',
'links',
'Linkdialog',
'Linkdialog mit URL, Text, CSS-Klasse, neuer Registerkarte und Nofollow',
'Links mit Ziel, sichtbarem Text und optionalen Attributen konfigurieren.'),
32 array(
'editor_source',
'editor-08-source-mode.png',
'quelltext',
'HTML-Quelltextmodus',
'HTML-Quelltextmodus des CMS-Editors mit formatiertem Seiteninhalt',
'Im Quelltextmodus sind Tags, Klassen, Medienreferenzen und dbx-Marker direkt sichtbar.'),
38 [$id,
$source, $suffix, $title, $alt, $caption] = $item;
41 'action' =>
'media.create_image_variant',
43 'source_file' =>
'dbx/modules/dbxKi/work/cms-fields-editor-tutorials-20260721/output/' .
$source,
44 'file_name' =>
'tutorial-cms-' . $suffix .
'.webp',
45 'media_folder' =>
'img/gallery',
50 'title' =>
'Tutorial CMS – ' . $title,
52 'caption' => $caption,
53 'tags' =>
'dbxapp,dbxcontent,cms,editor,tutorial,screenshot',
58foreach (array(486, 487, 488, 489, 490, 491) as $usageId) {
60 'id' =>
'unassign_old_' . $usageId,
61 'action' =>
'media.unassign',
62 'params' => array(
'usage_id' => $usageId),
67 [$id,
$source, $suffix, $title, $alt, $caption] = $item;
69 'id' =>
'assign_' . $id,
70 'action' =>
'media.assign',
72 'media_id' =>
'$ref:' . $id .
'.media_id',
76 'caption' => $caption,
82 'id' =>
'update_cms_fields_tutorial',
83 'action' =>
'page.update',
88 'title' =>
'Tutorial: CMS Felder, Kopfleiste und Einstellungen',
89 'seo_title' =>
'Tutorial: CMS Felder, Kopfleiste und Einstellungen',
90 'description' =>
'Alle Aktionen der CMS-Kopfleiste, Seitenfelder sowie Hero, Gallery und Inline-Medien mit geschlossenem Content Tree Schritt für Schritt.',
91 'keywords' =>
'dbxapp, dbxContent, CMS, Kopfleiste, Seitenfelder, Content Tree, Hero, Gallery, Inline Medien, Tutorial',
93 'template' =>
'c-body1-footer',
94 'hero_template' =>
'none',
95 'hero_image_id' =>
'none',
96 'gallery_template' =>
'image-gallery',
97 'gallery_visible_count' =>
'1',
98 'gallery_image_size' =>
'original',
99 'gallery_lightbox_width' =>
'100vw',
100 'gallery_overflow' =>
'tutorial',
101 'gallery_click_behavior' =>
'lightbox',
107 'id' =>
'cms_editor_page',
108 'action' =>
'page.create',
112 'title' =>
'Tutorial: CMS Editor',
113 'seo_title' =>
'Tutorial: CMS Editor',
114 'permalink' =>
'tutorial-cms-editor',
115 'description' =>
'Alle Schaltflächen und Untermenüs des dbxContent Editors: Text, Listen, Links, Medien, Module, Komponenten, Marker, Quelltext und Speichern.',
116 'keywords' =>
'dbxapp, dbxContent, CMS Editor, Jodit, Textformatierung, Listen, Links, Medien, Bootstrap, Marker, HTML, Tutorial',
119 'template' =>
'c-body1-footer',
120 'hero_template' =>
'none',
121 'hero_image_id' =>
'none',
122 'gallery_template' =>
'image-gallery',
123 'gallery_visible_count' =>
'1',
124 'gallery_image_size' =>
'original',
125 'gallery_lightbox_width' =>
'100vw',
126 'gallery_overflow' =>
'tutorial',
127 'gallery_click_behavior' =>
'lightbox',
134 [$id,
$source, $suffix, $title, $alt, $caption] = $item;
136 'id' =>
'assign_' . $id,
137 'action' =>
'media.assign',
139 'media_id' =>
'$ref:' . $id .
'.media_id',
140 'content_id' =>
'$ref:cms_editor_page.page_id',
143 'caption' => $caption,
149 'id' =>
'update_tutorial_overview',
150 'action' =>
'page.update',
156 'description' =>
'dbxapp Tutorials für Login, Admin-Dashboard, dbxContent-Felder, CMS-Editor, dbxKi, Shop-Dashboard, Shop-Administration, Frontend und Workflows.',
157 'keywords' =>
'dbxapp, Tutorials, Admin Dashboard, Shop Dashboard, dbxContent, CMS Editor, dbxKi, Workflow',
164 JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES
if($fieldsContent===false|| $editorContent===false|| $overviewContent===false) $fieldMedia