HTML Content Modul (Benutzerdefinierte Inhalte)

Das HTML-Content-Modul ermöglicht dem Anwender, für ihn bereitgestellte Inhalte einzusehen. Falls die entsprechenden Rechte vorliegen, können ausgewählte Anwender die Inhalte selbst erstellen und bearbeiten und sie damit anderen Anwendern zur Verfügung stellen.

Es ist außerdem möglich, eine HTML-Content-Seite im Process Dashboard als Widget einzubinden.
Wenden Sie sich dazu an Ihren Administrator.

Zugriffsrechte

Damit ein Nutzer auf das Modul zugreifen bzw. darin arbeiten kann, müssen im Administrationsbereich die nötigen Rechte zugewiesen werden:

loadModule_htmlcontent

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

htmlcontent_editor

Nutzer mit dieser Rolle können Inhalte editieren, indem sie auf das -Icon in der BPC-Toolbar klicken.

Einstellungen

Im Administrationsbereich können Parameter für das HTML-Content-Modul voreingestellt werden.
Dabei handelt es sich vor allem um allgemeine Einstellungen zum Modul als auch um Einstellungen für die Auszeichnungen, z. B. Link-Farben oder individuelle Textformate.

Setting (Key) Beschreibung Beispiel

Setting (Key)	Beschreibung	Beispiel
Module_Description (`moduleHeader_description`)	Kann als Untertitel oder Beschreibung genutzt werden.	Benutzerdefinierte Inhalte
Module_Header (`moduleHeader_enabled`)	Einstellung, ob Modultitel (Module_Name) und Untertitel (Module_Description) angezeigt werden oder nicht.	true (wird angezeigt)
Module_Icon (`module_iconCls`)	Individuell auswählbares Symbol, das vor dem Modultitel angezeigt wird. Falls kein Symbol angezeigt werden soll, muss dennoch ein Zeichen eingetragen werden. Bei leerem Feld wird ein Standard-Icon gewählt. [NOTE] ==== Das Modul-Icon entspricht nicht automatisch dem Icon in der Navigationsleiste. Dieses wird in den Navigationseinstellungen im Administrationsbereich festgelegt. ====	x-fal fa-books oder z. B. "0", damit kein Symbol angezeigt wird
Modul_Name (`module_name`)	Name bzw. Titel des Moduls	HTML Content Modul
Content (`content`)	Eine Übersicht der Inhalte, die im HTML-Content-Modul angezeigt werden. Die Übersicht 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.	`[ { "editorTabTitle": "German", "language": "de", "content": "<h1>Deutscher Inhalt</h1>" }, { "editorTabTitle": "English", "language": "en", "content": "<h1>English content</h1>" } ]` json
EditorCustomCSS (`editorStyles`)	CSS-Stylesheet, in dem benutzerdefinierte CSS-Klassen definiert werden. Diese können über das Setting `EditorOptions` in den Texteditor eingebunden werden.	`.TitleClass{ font-size: 30px; font-weight: 400; color : black; } .LinkClass{ font-size: 15px; font-weight: 100; color : blue; }` css
EditorOptions (`editorOptions`)	JSON-Objekt mit 2 Attributen ("inlineClasses", "linkStyles"). Als Attribute hat es den CSS-Klassennamen aus dem Setting `EditorCustomCSS`. Als Wert hat es den Namen, unter dem man auf die CSS-Klasse im Editor zugreifen kann (siehe Benutzerspezifische CSS-Klassen).	`{ "inlineClasses": { "TitleClass": "Custom Title" }, "linkStyles": { "LinkClass": "Custom Link" } }` json

Module_Description
(moduleHeader_description)

Kann als Untertitel oder Beschreibung genutzt werden.

Benutzerdefinierte Inhalte

Module_Header
(moduleHeader_enabled)

Einstellung, ob Modultitel (Module_Name) und Untertitel (Module_Description) angezeigt werden oder nicht.

true (wird angezeigt)

Module_Icon
(module_iconCls)

Individuell auswählbares Symbol, das vor dem Modultitel angezeigt wird.
Falls kein Symbol angezeigt werden soll, muss dennoch ein Zeichen eingetragen werden. Bei leerem Feld wird ein Standard-Icon gewählt.

[NOTE] ==== Das Modul-Icon entspricht nicht automatisch dem Icon in der Navigationsleiste. Dieses wird in den Navigationseinstellungen im Administrationsbereich festgelegt. ====

x-fal fa-books
oder z. B. "0", damit kein Symbol angezeigt wird

Modul_Name
(module_name)

Name bzw. Titel des Moduls

HTML Content Modul

Content
(content)

Eine Übersicht der Inhalte, die im HTML-Content-Modul angezeigt werden. Die Übersicht 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.

[
    {
        "editorTabTitle": "German",
        "language": "de",
        "content": "<h1>Deutscher Inhalt</h1>"
    },
    {
        "editorTabTitle": "English",
        "language": "en",
        "content": "<h1>English content</h1>"
    }
]json

EditorCustomCSS
(editorStyles)

CSS-Stylesheet, in dem benutzerdefinierte CSS-Klassen definiert werden. Diese können über das Setting EditorOptions in den Texteditor eingebunden werden.

 .TitleClass{
     font-size: 30px;
     font-weight: 400;
     color : black;
}
 .LinkClass{
     font-size: 15px;
     font-weight: 100;
     color : blue;
}css

EditorOptions
(editorOptions)

JSON-Objekt mit 2 Attributen ("inlineClasses", "linkStyles").
Als Attribute hat es den CSS-Klassennamen aus dem Setting EditorCustomCSS.
Als Wert hat es den Namen, unter dem man auf die CSS-Klasse im Editor zugreifen kann (siehe Benutzerspezifische CSS-Klassen).

{
  "inlineClasses": {
  "TitleClass": "Custom Title"
},
  "linkStyles": {
  "LinkClass": "Custom Link"
}
}json

Benutzerspezifische CSS-Klassen

Nachdem eine CSS-Klasse in dem Setting EditorCustomCSS definiert wurde, kann diese in dem Setting EditorOptions referenziert werden.

Inline CSS-Klassen

Steht der CSS-Klassenname (z.B. TitleClass) unter dem Attribut (z.B. inlineClasses), kann dieser wie folgt im Editor adressiert und auf jedes Element angewendet werden.

Hinzufügen eines Links

Steht der CSS-Klassenname (z. B. LinkClass) unter dem Attribut (z. B. linkStyles), bezieht dieser sich auf einen Link und kann wie folgt im Editor adressiert werden:

Zuweisung einer Link-Klasse

Durch Klicken auf den neu eingefügten Link wird ein Tooltip geöffnet, bei dem der 2. Menüeintrag von links eine Liste von unseren LinkStyles beinhaltet:

Benutzeroberfläche

Beim Aufrufen des Moduls befinden Sie sich vorerst im Lesemodus.

Inhalte bearbeiten

Um Inhalte zu erstellen und zu bearbeiten, sind entsprechende Rechte nötig.
Bitte wenden Sie sich ggf. an Ihren Administrator.

Das -Funktionsicon zum Bearbeiten befindet sich an einer dieser 3 Stellen: * in der BPC-Toolbar links * in der BPC-Toolbar rechts * in der Modul-Kopfleiste

Durch Klicken auf das Icon gelangen Sie in den Bearbeitungsmodus.

Bearbeitungsmodus

Im Bearbeitungsmodus wird der Editor geöffnet und es können neue Inhalte angelegt oder bereits vorhandene Inhalte bearbeitet werden.

Als Standard werden die Inhalte auf Englisch und Deutsch angeboten. Jede verfügbare Sprache wird in einem eigenen Tab angezeigt.

Die Anzahl und Auswahl der Sprachen kann individuell angepasst werden. Wenden Sie sich dazu an Ihren Administrator.

Funktionen im Editor

Im Editor haben Sie die Möglichkeit, Texte zu erstellen und anzupassen und weitere Inhalte wie Links oder Grafiken hinzuzufügen. Die Funktionen des Editors sind über Icons in einer Toolbar verfügbar:

Button	Beschreibung
	Macht die letzte Aktion rückgängig.
	Stellt die Aktion wieder her. (Der Button ist nur anwendbar, wenn zuvor eine Aktion rückgängig gemacht wurde.)
	Öffnet ein Fenster mit Tastenkombinationen, die im Editor hilfreich sein können.
	Zeichnet den Text fett aus.
	Zeichnet den Text kursiv aus.
	Zeichnet den Text unterstrichen aus.
	Zeichnet den Text durchgestrichen aus.
	Zeichnet den Text tiefgestellt aus.
	Zeichnet den Text hochgestellt aus.
	Öffnet eine Auswahl für die Textgröße.
	Öffnet eine vordefinierte Auswahl für die Textfarbe. Über das Feld "HEX Color" kann eine eigene Farbe ausgewählt werden, z. B. "#FFFF00". Ein Klick auf das -Icon setzt die Textfarbe auf den Standard (Schwarz) zurück.
	Öffnet eine vordefinierte Auswahl für die Hintergrundfarbe des markierten Textes. Über das Feld "HEX Color" kann eine eigene Farbe ausgewählt werden, z. B. "#FFFF00". Ein Klick auf das -Icon setzt die Textfarbe auf den Standard (Schwarz) zurück.
	Öffnet eine Auswahl voreingestellter Formate.
	Öffnet eine Auswahl voreingestellter Formate.
	Löscht jegliche Formatierung des markierten Textes.
	Richtet die aktuelle Zeile bzw. alle markierten Zeilen links aus.
	Richtet die aktuelle Zeile bzw. alle markierten Zeilen mittig aus.
	Richtet die aktuelle Zeile bzw. alle markierten Zeilen rechts aus.
	Richtet die aktuelle Zeile bzw. alle markierten Zeilen im Blocksatz aus.
	Wandelt die aktuelle Zeile bzw. alle markierten Zeilen in eine nummerierte Liste um. Standardmäßig werden Dezimalzahlen genutzt. Durch Klick auf den Pfeil neben dem Button sind weitere Nummerierungsstile auswählbar.
	Wandelt die aktuelle Zeile bzw. alle markierten Zeilen in eine ungeordnete Liste um. Standardmäßig werden schwarze Kreise als Listenpunkte genutzt. Durch Klick auf den Pfeil neben dem Button sind weitere Listenstile auswählbar.
	Öffnet eine Auswahl von unterschiedlichen Überschrift- und Textstilen für die aktuelle Zeile bzw. alle markierten Zeilen. Standardmäßig wird "Normaltext" genutzt.
	Öffnet eine Auswahl von unterschiedlichen Textgestaltungsmöglichkeiten. Gray Färbt die aktuelle Zeile bzw. alle markierten Zeilen grau ein. Bordered Fügt ober- und unterhalb der aktuellen Zeile bzw. aller markierten Zeilen eine dünne Linie hinzu. Die Linien werden für jede einzelne Zeile hinzugefügt. Sollen also mehrere Zeilen zwischen den Linien eingeschlossen werden, muss ein weicher Zeilenumbruch (kbd:[Strg] + kbd:[Enter]) verwendet werden. Spaced Die Abstände zwischen den Buchstaben und Zeichen der aktuellen Zeile bzw. aller markierten Zeilen werden vergrößert. Uppercase Alle Buchstaben der aktuellen Zeile bzw. aller markierten Zeilen werden großgeschrieben. Die Möglichkeiten können kombiniert werden und müssen einzeln wieder abgewählt werden, um zum Normaltext zurückzugelangen.
	Öffnet eine Auswahl von unterschiedlichen Abständen zwischen den Zeilen.
	Verringert den Einzug der aktuellen Zeile bzw. aller markierten Zeilen. Der Button kann nur verwendet werden, wenn ein Einzug vorliegt.
	Erhöht den Einzug der aktuellen Zeile bzw. aller markierten Zeilen. Der Button kann mehrfach verwendet werden.
	Öffnet eine Auswahl, um Zitate zu kennzeichnen und die Zitatebene anzupassen. Die Zitatebene wird durch vertikale Striche am Zeilenanfang sowie die dazu passende Textfarbe verdeutlicht. Es sind maximal 3 unterschiedliche Ebenen möglich, ab der 4. Ebene erscheinen weitere Striche, jedoch bleibt die Textfarbe gleich.
	Öffnet ein Fenster, in dem die URL einer Webseite und der im Link angezeigte Text eingetragen werden können. Außerdem besteht die Möglichkeit, durch das Anhaken der Option den Link in einem neuen Fenster öffnen zu lassen.
	Öffnet ein Fenster, in dem die URL einer Grafik eingetragen werden kann.
	Öffnet ein Fenster, in dem eine Tabelle durch Auswahl der Spalten- und Zeilenanzahl erstellt werden kann.
	Öffnet ein Fenster, in dem ein Emoticon ausgewählt werden kann. Sollen mehrere Emoticons eingefügt werden, muss der Button mehrmals geklickt werden.
	Öffnet ein Fenster, in dem ein Sonderzeichen ausgewählt werden kann. Sollen mehrere Sonderzeichen eingefügt werden, muss der Button mehrmals geklickt werden.
	Fügt eine horizontale Linie unterhalb der aktuellen Zeile ein.
	Die Inhalte werden als HTML-Code angezeigt und können dort auch bearbeitet werden.

Button

Beschreibung

Macht die letzte Aktion rückgängig.

Stellt die Aktion wieder her.
(Der Button ist nur anwendbar, wenn zuvor eine Aktion rückgängig gemacht wurde.)

Öffnet ein Fenster mit Tastenkombinationen, die im Editor hilfreich sein können.

Zeichnet den Text fett aus.

Zeichnet den Text kursiv aus.

Zeichnet den Text unterstrichen aus.

Zeichnet den Text durchgestrichen aus.

Zeichnet den Text tiefgestellt aus.

Zeichnet den Text hochgestellt aus.

Öffnet eine Auswahl für die Textgröße.

Öffnet eine vordefinierte Auswahl für die Textfarbe.
Über das Feld "HEX Color" kann eine eigene Farbe ausgewählt werden, z. B. "#FFFF00".
Ein Klick auf das -Icon setzt die Textfarbe auf den Standard (Schwarz) zurück.

Öffnet eine vordefinierte Auswahl für die Hintergrundfarbe des markierten Textes.
Über das Feld "HEX Color" kann eine eigene Farbe ausgewählt werden, z. B. "#FFFF00".
Ein Klick auf das -Icon setzt die Textfarbe auf den Standard (Schwarz) zurück.

Öffnet eine Auswahl voreingestellter Formate.

Löscht jegliche Formatierung des markierten Textes.

Richtet die aktuelle Zeile bzw. alle markierten Zeilen links aus.

Richtet die aktuelle Zeile bzw. alle markierten Zeilen mittig aus.

Richtet die aktuelle Zeile bzw. alle markierten Zeilen rechts aus.

Richtet die aktuelle Zeile bzw. alle markierten Zeilen im Blocksatz aus.

Wandelt die aktuelle Zeile bzw. alle markierten Zeilen in eine nummerierte Liste um.
Standardmäßig werden Dezimalzahlen genutzt. Durch Klick auf den Pfeil neben dem Button sind weitere Nummerierungsstile auswählbar.

Wandelt die aktuelle Zeile bzw. alle markierten Zeilen in eine ungeordnete Liste um.
Standardmäßig werden schwarze Kreise als Listenpunkte genutzt. Durch Klick auf den Pfeil neben dem Button sind weitere Listenstile auswählbar.

Öffnet eine Auswahl von unterschiedlichen Überschrift- und Textstilen für die aktuelle Zeile bzw. alle markierten Zeilen.
Standardmäßig wird "Normaltext" genutzt.

Öffnet eine Auswahl von unterschiedlichen Textgestaltungsmöglichkeiten.

Gray: Färbt die aktuelle Zeile bzw. alle markierten Zeilen grau ein.
Bordered: Fügt ober- und unterhalb der aktuellen Zeile bzw. aller markierten Zeilen eine dünne Linie hinzu.
Die Linien werden für jede einzelne Zeile hinzugefügt. Sollen also mehrere Zeilen zwischen den Linien eingeschlossen werden, muss ein weicher Zeilenumbruch (kbd:[Strg] + kbd:[Enter]) verwendet werden.
Spaced: Die Abstände zwischen den Buchstaben und Zeichen der aktuellen Zeile bzw. aller markierten Zeilen werden vergrößert.
Uppercase: Alle Buchstaben der aktuellen Zeile bzw. aller markierten Zeilen werden großgeschrieben.

Die Möglichkeiten können kombiniert werden und müssen einzeln wieder abgewählt werden, um zum Normaltext zurückzugelangen.

Öffnet eine Auswahl von unterschiedlichen Abständen zwischen den Zeilen.

Verringert den Einzug der aktuellen Zeile bzw. aller markierten Zeilen.
Der Button kann nur verwendet werden, wenn ein Einzug vorliegt.

Erhöht den Einzug der aktuellen Zeile bzw. aller markierten Zeilen.
Der Button kann mehrfach verwendet werden.

Öffnet eine Auswahl, um Zitate zu kennzeichnen und die Zitatebene anzupassen.
Die Zitatebene wird durch vertikale Striche am Zeilenanfang sowie die dazu passende Textfarbe verdeutlicht. Es sind maximal 3 unterschiedliche Ebenen möglich, ab der 4. Ebene erscheinen weitere Striche, jedoch bleibt die Textfarbe gleich.

Öffnet ein Fenster, in dem die URL einer Webseite und der im Link angezeigte Text eingetragen werden können.
Außerdem besteht die Möglichkeit, durch das Anhaken der Option den Link in einem neuen Fenster öffnen zu lassen.

Öffnet ein Fenster, in dem die URL einer Grafik eingetragen werden kann.

Öffnet ein Fenster, in dem eine Tabelle durch Auswahl der Spalten- und Zeilenanzahl erstellt werden kann.

Öffnet ein Fenster, in dem ein Emoticon ausgewählt werden kann.
Sollen mehrere Emoticons eingefügt werden, muss der Button mehrmals geklickt werden.

Öffnet ein Fenster, in dem ein Sonderzeichen ausgewählt werden kann.
Sollen mehrere Sonderzeichen eingefügt werden, muss der Button mehrmals geklickt werden.

Fügt eine horizontale Linie unterhalb der aktuellen Zeile ein.

Die Inhalte werden als HTML-Code angezeigt und können dort auch bearbeitet werden.

Bearbeitung abschließen

Nachdem die Bearbeitung erfolgt ist, können die erzeugten Inhalte gespeichert bzw. verworfen werden. In beiden Fällen wird der Bearbeitungsmodus verlassen.

Im Lesemodus können Sie das Ergebnis der Bearbeitung betrachten.

Keywords: