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.

htmlcontent_editor_<MODUL_ID>

Nutzer mit dieser Rolle können nur Inhalte mit dieser Modul ID editieren, indem sie auf das -Icon in der BPC-Toolbar klicken.
Beispiel: Die Rolle htmlcontent_editor_123 erlaubt das Editieren von Inhalten im HTML Content Modul mit der ID 123.

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.

HTML-Content-Einstellungen im Administrationsbereich
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>"
    }
]

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;
}

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"
}
}

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.

Inline CSS-Klassen

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:

Link hinzufügen

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:

Link-Klasse

Benutzeroberfläche

Beim Aufrufen des Moduls befinden Sie sich vorerst im Lesemodus.

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.

Seite bearbeiten

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.

Sprachen-Tabs

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

Rückgängig

Macht die letzte Aktion rückgängig.

Wiederholen

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

Hilfe

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

Fett auszeichnen

Zeichnet den Text fett aus.

Kursiv auszeichnen

Zeichnet den Text kursiv aus.

Unterstrichen auszeichnen

Zeichnet den Text unterstrichen aus.

Durchgestrichen auszeichnen

Zeichnet den Text durchgestrichen aus.

Tiefgestellt auszeichnen

Zeichnet den Text tiefgestellt aus.

Hochgestellt auszeichnen

Zeichnet den Text hochgestellt aus.

Auswahl für Textgröße

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

Auswahl für Textfarbe

Ö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.

Auswahl für Hintergrundfarbe des Textes

Ö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.

Voreingestellte Formate

Öffnet eine Auswahl voreingestellter Formate.

Voreingestellte Formate

Öffnet eine Auswahl voreingestellter Formate.

Textformatierung löschen

Löscht jegliche Formatierung des markierten Textes.

Links ausrichten

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

Mittig ausrichten

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

Rechts ausrichten

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

Im Blocksatz ausrichten

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

Nummerierte Liste

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.

Ungeordnete Liste

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.

Auswahl Überschriften- und Textstile

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

Auswahl Textgestaltung

Ö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.

Zeilenabstände

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

Einzug verkleinern

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

Einzug vergrößern

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

Zitat

Ö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.

Link einfügen

Ö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.

Grafik einfügen

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

Tabelle einfügen

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

Emoticons

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

Sonderzeichen einfügen

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

Horizontale Linie einfügen

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

HTML-Code anzeigen

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.

Bearbeitung abschließen

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

Keywords:
Press Esc to exit full screen
Modal image placeholder
Press Esc to exit full screen