HTML-Content-Modul

Das HTML-Content-Modul ermöglicht Anwendern die Einsicht in bereitgestellte Inhalte. Bei entsprechender Berechtigung können Anwender Inhalte erstellen, bearbeiten und veröffentlichen. Zusätzlich kann eine HTML-Content-Seite als Widget im Process Dashboard eingebunden werden. Wenden Sie sich für die Widget-Einbindung an Ihren Administrator.

Benutzeroberfläche

Beim Aufrufen des Moduls wird standardmäßig der Lesemodus angezeigt. Dieser Modus dient der reinen Ansicht der Inhalte ohne Bearbeitungsfunktionen.

Voraussetzungen

Um das HTML-Content-Modul nutzen und verwalten zu können, müssen folgende Voraussetzungen erfüllt sein:

Sie verfügen über die notwendigen Berechtigungen für den Zugriff auf das Modul.
Für die Bearbeitung von Inhalten ist die entsprechende Editor-Rolle zugewiesen.

Die folgenden Berechtigungen werden im Administrationsbereich verwaltet:

loadModule_htmlcontent

Nutzer mit diesem Recht können auf das Modul zugreifen.

htmlcontent_editor

Nutzer mit dieser Rolle können Inhalte über das -Icon in der BPC-Toolbar bearbeiten.

htmlcontent_editor_<MODUL_ID>

Nutzer mit dieser Rolle können nur Inhalte der spezifischen Modul-ID bearbeiten. Beispiel: Die Rolle htmlcontent_editor_123 erlaubt das Editieren von Inhalten im Modul mit der ID 123.

Modul konfigurieren

Im Administrationsbereich werden die grundlegenden Parameter für das HTML-Content-Modul festgelegt. Dazu gehören allgemeine Moduleinstellungen sowie Formate für Auszeichnungen wie Link-Farben oder Textstile.

Die folgenden Konfigurationsparameter gelten für das gesamte Modul:

Modul

Allgemeine Moduleinstellungen

Name (ID) Beschreibung

Name (`ID`)	Beschreibung
Name (`module_name`)	Name bzw. Titel des Moduls/der Komponente.
Icon (`module_iconCls`)	Individuell auswählbares Icon, das vor dem Titel angezeigt wird. Falls kein Symbol angezeigt werden soll, kann z.B. "none" eingetragen werden. Bei leerem Feld wird ein Standard-Icon gewählt.
Beschreibung (`moduleHeader_description`)	Kann als zusätzliche Beschreibung genutzt werden, die im Modulheader angezeigt wird.
Toolbar links (`appToolbarLeftContent`)	Inhalte links im globalen Header. Diese werden nur angezeigt, wenn das Modul angezeigt wird. Verfügbare Werte: "edit"
Toolbar rechts (`appToolbarRightContent`)	Inhalte rechts im globalen Header. Diese werden nur angezeigt, wenn das Modul angezeigt wird. Verfügbare Werte: "edit"
Modulheader (`moduleHeaderContent`)	Inhalte des Modulheaders. Verfügbare Werte: "edit"

Name
(module_name)

Name bzw. Titel des Moduls/der Komponente.

Icon
(module_iconCls)

Individuell auswählbares Icon, das vor dem Titel angezeigt wird.
Falls kein Symbol angezeigt werden soll, kann z.B. "none" eingetragen werden. Bei leerem Feld wird ein Standard-Icon gewählt.

Beschreibung
(moduleHeader_description)

Kann als zusätzliche Beschreibung genutzt werden, die im Modulheader angezeigt wird.

Toolbar links
(appToolbarLeftContent)

Inhalte links im globalen Header.
Diese werden nur angezeigt, wenn das Modul angezeigt wird.
Verfügbare Werte: "edit"

Toolbar rechts
(appToolbarRightContent)

Inhalte rechts im globalen Header.
Diese werden nur angezeigt, wenn das Modul angezeigt wird.
Verfügbare Werte: "edit"

Modulheader
(moduleHeaderContent)

Inhalte des Modulheaders.
Verfügbare Werte: "edit"

Konfiguration

Modulspezifische Einstellungen

Name (ID) Beschreibung

Name (`ID`)	Beschreibung
HTML Inhalte (`content`)	HTML Inhalte, die im HTML-Content-Modul angezeigt werden. Der Inhalt aktualisiert sich automatisch, wenn von Anwendern (mit Bearbeitungsberechtigung) Änderungen im Modul direkt vorgenommen werden. Jedes Content-Element setzt sich aus einem Titel, einer Sprache und dem gewünschten HTML-Inhalt zusammen. Die HTML Inhalte sollten immer über den Editor der HTML-Ansicht selbst bearbeitet werden.
Benutzerdefiniertes Stylesheet (`editorStyles`)	CSS-Stylesheet, in dem benutzerdefinierte CSS-Klassen definiert werden. Diese können in dem HTML-Editor verwendet werden.
Zusätzliche HTML-Editor Optionen (`editorOptions`)	Zusätzliche Konfigurationsparameter für den HTML-Editor. Mögliche Optionen können der Dokumentation des Froala-Editors (https://froala.com/) entnommen werden.

HTML Inhalte
(content)

HTML Inhalte, die im HTML-Content-Modul angezeigt werden. Der Inhalt aktualisiert sich automatisch, wenn von Anwendern (mit Bearbeitungsberechtigung) Änderungen im Modul direkt vorgenommen werden.
Jedes Content-Element setzt sich aus einem Titel, einer Sprache und dem gewünschten HTML-Inhalt zusammen.
Die HTML Inhalte sollten immer über den Editor der HTML-Ansicht selbst bearbeitet werden.

Benutzerdefiniertes Stylesheet
(editorStyles)

CSS-Stylesheet, in dem benutzerdefinierte CSS-Klassen definiert werden. Diese können in dem HTML-Editor verwendet werden.

Zusätzliche HTML-Editor Optionen
(editorOptions)

Zusätzliche Konfigurationsparameter für den HTML-Editor. Mögliche Optionen können der Dokumentation des Froala-Editors (https://froala.com/) entnommen werden.

HTML-Content-Einstellungen im Administrationsbereich

Zusätzlich können Einstellungen je Komponente vorgenommen werden:

Modul

Allgemeine Moduleinstellungen

Name (ID) Beschreibung

Name (`ID`)	Beschreibung
Name (`module_name`)	Name bzw. Titel des Moduls/der Komponente.
Icon (`module_iconCls`)	Individuell auswählbares Icon, das vor dem Titel angezeigt wird. Falls kein Symbol angezeigt werden soll, kann z.B. "none" eingetragen werden. Bei leerem Feld wird ein Standard-Icon gewählt.
Beschreibung (`moduleHeader_description`)	Kann als zusätzliche Beschreibung genutzt werden, die im Modulheader angezeigt wird.
Toolbar links (`appToolbarLeftContent`)	Inhalte links im globalen Header. Diese werden nur angezeigt, wenn das Modul angezeigt wird. Verfügbare Werte: "edit"
Toolbar rechts (`appToolbarRightContent`)	Inhalte rechts im globalen Header. Diese werden nur angezeigt, wenn das Modul angezeigt wird. Verfügbare Werte: "edit"
Modulheader (`moduleHeaderContent`)	Inhalte des Modulheaders. Verfügbare Werte: "edit"

Name
(module_name)

Name bzw. Titel des Moduls/der Komponente.

Icon
(module_iconCls)

Individuell auswählbares Icon, das vor dem Titel angezeigt wird.
Falls kein Symbol angezeigt werden soll, kann z.B. "none" eingetragen werden. Bei leerem Feld wird ein Standard-Icon gewählt.

Beschreibung
(moduleHeader_description)

Kann als zusätzliche Beschreibung genutzt werden, die im Modulheader angezeigt wird.

Toolbar links
(appToolbarLeftContent)

Inhalte links im globalen Header.
Diese werden nur angezeigt, wenn das Modul angezeigt wird.
Verfügbare Werte: "edit"

Toolbar rechts
(appToolbarRightContent)

Inhalte rechts im globalen Header.
Diese werden nur angezeigt, wenn das Modul angezeigt wird.
Verfügbare Werte: "edit"

Modulheader
(moduleHeaderContent)

Inhalte des Modulheaders.
Verfügbare Werte: "edit"

Konfiguration

Modulspezifische Einstellungen

Name (ID) Beschreibung

Name (`ID`)	Beschreibung
HTML Inhalte (`content`)	HTML Inhalte, die im HTML-Content-Modul angezeigt werden. Der Inhalt aktualisiert sich automatisch, wenn von Anwendern (mit Bearbeitungsberechtigung) Änderungen im Modul direkt vorgenommen werden. Jedes Content-Element setzt sich aus einem Titel, einer Sprache und dem gewünschten HTML-Inhalt zusammen. Die HTML Inhalte sollten immer über den Editor der HTML-Ansicht selbst bearbeitet werden.
Benutzerdefiniertes Stylesheet (`editorStyles`)	CSS-Stylesheet, in dem benutzerdefinierte CSS-Klassen definiert werden. Diese können in dem HTML-Editor verwendet werden.
Zusätzliche HTML-Editor Optionen (`editorOptions`)	Zusätzliche Konfigurationsparameter für den HTML-Editor. Mögliche Optionen können der Dokumentation des Froala-Editors (https://froala.com/) entnommen werden.

HTML Inhalte
(content)

Benutzerdefiniertes Stylesheet
(editorStyles)

CSS-Stylesheet, in dem benutzerdefinierte CSS-Klassen definiert werden. Diese können in dem HTML-Editor verwendet werden.

Zusätzliche HTML-Editor Optionen
(editorOptions)

Zusätzliche Konfigurationsparameter für den HTML-Editor. Mögliche Optionen können der Dokumentation des Froala-Editors (https://froala.com/) entnommen werden.

Inhalte bearbeiten

In diesem Abschnitt wird beschrieben, wie Sie Inhalte im HTML-Content-Modul erstellen oder anpassen.

Navigieren Sie zum HTML-Content-Modul.
Klicken Sie auf das -Icon zum Bearbeiten.

Das Icon befindet sich je nach Konfiguration in der BPC-Toolbar (links oder rechts) oder in der Modul-Kopfleiste.
Erstellen oder bearbeiten Sie die Inhalte im Editor-Fenster.

Jede verfügbare Sprache wird in einem eigenen Tab angezeigt.
Nutzen Sie die Funktionen der Toolbar, um Texte zu formatieren oder Medien einzufügen.
Klicken Sie auf Speichern (), um die Änderungen zu übernehmen.

Die Bearbeitung wird abgeschlossen und der Bearbeitungsmodus verlassen.

Die aktualisierten Inhalte werden nun im Lesemodus angezeigt.

Funktionen im Editor

Der Editor bietet verschiedene Werkzeuge zur Textgestaltung und zum Einfügen von Elementen. Die Funktionen sind über die Toolbar des Editors erreichbar:

Button	Beschreibung
	Macht die letzte Aktion rückgängig.
	Stellt eine zuvor rückgängig gemachte Aktion wieder her.
	Öffnet ein Fenster mit nützlichen Tastenkombinationen für den Editor.
	Formatiert den markierten Text fett.
	Formatiert den markierten Text kursiv.
	Formatiert den markierten Text unterstrichen.
	Formatiert den markierten Text durchgestrichen.
	Formatiert den markierten Text tiefgestellt.
	Formatiert den markierten Text hochgestellt.
	Ermöglicht die Auswahl der Schriftgröße.
	Ermöglicht die Auswahl der Textfarbe oder die Eingabe eines HEX-Werts (z. B. "#FFFF00").
	Ermöglicht die Auswahl der Hintergrundfarbe für den markierten Text.
	Wendet vordefinierte CSS-Klassen auf den Text an.
	Wendet vordefinierte Stile auf den Text an.
	Entfernt alle Formatierungen vom markierten Text.
	Richtet den Text linksbündig aus.
	Richtet den Text zentriert aus.
	Richtet den Text rechtsbündig aus.
	Richtet den Text im Blocksatz aus.
	Erstellt eine nummerierte Liste oder ändert den Nummerierungsstil.
	Erstellt eine ungeordnete Liste oder ändert den Listenstil.
	Ermöglicht die Auswahl von Überschrift- und Textstilen.
	Bietet zusätzliche Textgestaltungen wie "Gray", "Bordered", "Spaced" oder "Uppercase".
	Ermöglicht die Anpassung des Zeilenabstands.
	Verringert den Einzug des aktuellen Absatzes.
	Erhöht den Einzug des aktuellen Absatzes.
	Kennzeichnet Text als Zitat und ermöglicht die Anpassung der Zitatebene.
	Öffnet einen Dialog zum Einfügen und Konfigurieren von Hyperlinks.
	Ermöglicht das Einfügen von Grafiken über eine URL.
	Öffnet einen Dialog zum Erstellen von Tabellen mit definierter Spalten- und Zeilenanzahl.
	Ermöglicht das Einfügen von Emoticons.
	Ermöglicht das Einfügen von Sonderzeichen.
	Fügt eine horizontale Trennlinie ein.
	Wechselt zwischen der visuellen Ansicht und der HTML-Code-Ansicht.

Button

Beschreibung

Rückgängig

Macht die letzte Aktion rückgängig.

Wiederholen

Stellt eine zuvor rückgängig gemachte Aktion wieder her.

Hilfe

Öffnet ein Fenster mit nützlichen Tastenkombinationen für den Editor.

Fett

Formatiert den markierten Text fett.

Kursiv

Formatiert den markierten Text kursiv.

Unterstrichen

Formatiert den markierten Text unterstrichen.

Durchgestrichen

Formatiert den markierten Text durchgestrichen.

Tiefgestellt

Formatiert den markierten Text tiefgestellt.

Hochgestellt

Formatiert den markierten Text hochgestellt.

Textgröße

Ermöglicht die Auswahl der Schriftgröße.

Textfarbe

Ermöglicht die Auswahl der Textfarbe oder die Eingabe eines HEX-Werts (z. B. "#FFFF00").

Hintergrundfarbe

Ermöglicht die Auswahl der Hintergrundfarbe für den markierten Text.

Inline-Klassen

Wendet vordefinierte CSS-Klassen auf den Text an.

Inline-Styles

Wendet vordefinierte Stile auf den Text an.

Formatierung löschen

Entfernt alle Formatierungen vom markierten Text.

Links ausrichten

Richtet den Text linksbündig aus.

Zentrieren

Richtet den Text zentriert aus.

Rechts ausrichten

Richtet den Text rechtsbündig aus.

Blocksatz

Richtet den Text im Blocksatz aus.

Nummerierte Liste

Erstellt eine nummerierte Liste oder ändert den Nummerierungsstil.

Aufzählungsliste

Erstellt eine ungeordnete Liste oder ändert den Listenstil.

Absatzformat

Ermöglicht die Auswahl von Überschrift- und Textstilen.

Absatzstil

Bietet zusätzliche Textgestaltungen wie "Gray", "Bordered", "Spaced" oder "Uppercase".

Zeilenabstand

Ermöglicht die Anpassung des Zeilenabstands.

Einzug verkleinern

Verringert den Einzug des aktuellen Absatzes.

Einzug vergrößern

Erhöht den Einzug des aktuellen Absatzes.

Zitat

Kennzeichnet Text als Zitat und ermöglicht die Anpassung der Zitatebene.

Link einfügen

Öffnet einen Dialog zum Einfügen und Konfigurieren von Hyperlinks.

Grafik einfügen

Ermöglicht das Einfügen von Grafiken über eine URL.

Tabelle einfügen

Öffnet einen Dialog zum Erstellen von Tabellen mit definierter Spalten- und Zeilenanzahl.

Emoticons

Ermöglicht das Einfügen von Emoticons.

Sonderzeichen

Ermöglicht das Einfügen von Sonderzeichen.

Trennlinie

Fügt eine horizontale Trennlinie ein.

Code-Ansicht

Wechselt zwischen der visuellen Ansicht und der HTML-Code-Ansicht.

CSS-Klassen verwenden

Für eine erweiterte Textgestaltung können benutzerdefinierte CSS-Klassen definiert und angewendet werden. Diese werden zunächst in der Einstellung EditorCustomCSS definiert und anschließend in EditorOptions referenziert.

Inline-CSS-Klassen anwenden

Wenn eine CSS-Klasse unter dem Attribut inlineClasses definiert ist, kann sie im Editor auf beliebige Elemente angewendet werden.

Anwendung von Inline-CSS-Klassen im Editor

Links mit CSS-Klassen formatieren

Spezielle Klassen für Links werden unter dem Attribut linkStyles definiert. Diese Klassen können beim Bearbeiten eines Links zugewiesen werden.

Markieren Sie den Link im Editor.
Öffnen Sie das Tooltip-Menü durch Klicken auf den Link.
Wählen Sie die gewünschte Klasse aus der Liste der Link-Styles aus.

Die gewählte Formatierung wird auf den Link angewendet.

Keywords: