Der HTML-Editor dient zum Erstellen und Formatieren von Informationsfeldern Texte, Bilder und zusätzliche Elemente können eingefügt und nachträglich bearbeitet oder entfernt werden.

Toolbar

Die Toolbar zeigt abhängig von der Konfiguration und der verfügbaren Breite unterschiedliche Schaltflächen. Bei wenig Platz werden Einfüge- und Strukturfunktionen unter Weitere Optionen zusammengefasst.

Verlauf und Textformatierung

Funktion	Beschreibung
Zurück	Macht die letzte Änderung rückgängig.
Vorwärts	Stellt eine rückgängig gemachte Änderung wieder her.
Fett	Schaltet fette Schrift für die Auswahl oder den folgenden Text ein bzw. aus.
Kursiv	Schaltet kursive Schrift ein bzw. aus.
Unterstrichen	Schaltet die Unterstreichung ein bzw. aus.
Schriftfarbe	Öffnet die vom Mandanten bereitgestellten Farboptionen und wendet die gewählte Farbe auf die Auswahl an. Die Funktion wird nur angezeigt, wenn mehrere Farben konfiguriert sind.
Text / Überschrift 1 bis 6	Wandelt den aktuellen Absatz in normalen Text oder eine Überschrift der gewählten Ebene um.
Ausrichtung	Richtet den aktuellen Absatz links, mittig, rechts oder im Blocksatz aus.
Aufzählung	Schaltet eine ungeordnete Liste ein oder aus.
Nummerierte Liste	Schaltet eine geordnete Liste ein oder aus.

Die Formatierung bezieht sich auf die aktuelle Textauswahl. Ist keine Auswahl vorhanden, gilt sie für den Text, der anschließend eingegeben wird. Die Toolbar zeigt den aktuell aktiven Zustand an.

Elemente einfügen

Funktion	Ergebnis
Bild hochladen	Öffnet die Dateiauswahl. Unterstützt werden PNG-, JPG- und JPEG-Dateien. Anschließend wird der Bilddialog geöffnet.
Bildeinstellungen bearbeiten	Öffnet den Bilddialog für das aktuell ausgewählte Bild. Die Schaltfläche wird nur bei einer Bildauswahl angezeigt.
Info Box	Fügt einen farblich gestalteten Informationsbereich mit einem leeren Absatz ein. Der Cursor steht danach im neuen Bereich.
Link	Öffnet den Linkdialog zum Erstellen, Ändern oder Entfernen eines Links. Links können auf Text, Bilder und Variablen angewendet werden.
YouTube-Video	Öffnet den YouTube-Dialog und fügt nach der Bestätigung ein Video ein, das sich an den verfügbaren Platz anpasst.
Emoji	Öffnet die Emoji-Suche und fügt das ausgewählte Zeichen an der Cursorposition ein.

Struktur und Layout

Funktion	Ergebnis
Horizontale Linie	Fügt eine horizontale Linie ein.
Vertikaler Abstand	Fügt einen festen vertikalen Abstand von 18 px ein.
Horizontaler Abstand	Fügt einen festen horizontalen Abstand von 18 px innerhalb einer Zeile ein.
Spalten	Öffnet den Dialog zur Erstellung eines zwei- bis sechsspaltigen Layouts.
Hintergrundbereich	Öffnet die Auswahl der für den Mandanten verfügbaren Hintergrundfarben und fügt einen farbigen Bereich ein. In einem bereits ausgewählten Hintergrundbereich wird dessen Farbe geändert.
Variable	Öffnet die Variablenauswahl. Die Funktion ist nur verfügbar, wenn Variablenoptionen vorhanden sind

Eingefügte Elemente besitzen im Editor eine eigene Auswahl und können über die zugehörige Entfernen-Schaltfläche wieder gelöscht werden.

Dialoge

Linkdialog

Der Linkdialog passt seine Felder an die aktuelle Auswahl an:

• Bei normalem Text stehen Link Text und URL zur Verfügung.
• Bei einem ausgewählten Bild oder einer ausgewählten Variable wird kein eigener Linktext abgefragt. Das Element selbst wird verlinkt.
• Bei einem Bild kann zusätzlich eine Variable als dynamisches Linkziel ausgewählt werden, sofern Variablenoptionen vorhanden sind.

Die URL wird auf ein gültiges und sicheres URL-Format geprüft. Fehlt ein Protokoll, wird beim Übernehmen automatisch https:// ergänzt. Bereits vorhandene Links werden mit ihren Werten geöffnet. Wird ein bestehender Link ohne URL übernommen, wird die Verknüpfung entfernt. Links werden in einem neuen Browser-Tab geöffnet.

YouTube-Dialog

Der Dialog enthält das Pflichtfeld YouTube URL. Akzeptiert werden folgende Formate:

• https://youtu.be/<Video-Id>
• https://www.youtube.com/watch?v=<Video-Id>
• https://www.youtube.com/embed/<Video-Id>
• https://www.youtube.com/v/<Video-Id>
• eine reine, genau 11 Zeichen lange Video-Id

Nach der Bestätigung wird das Video automatisch passend zum verfügbaren Platz angezeigt. Das Bildformat bleibt dabei erhalten.

Emoji-Dialog

Über Emoji suchen kann nach einem Emoji gesucht werden. Die Treffer sind nach Kategorien gruppiert, zum Beispiel Smileys, Menschen, Tiere, Essen, Objekte, Symbole und Flaggen. Mit Übernehmen wird das ausgewählte Emoji an der aktuellen Cursorposition eingefügt.

Variablendialog

Im Feld Variable wird eine der vom Formular bereitgestellten Variablen ausgewählt. Die Auswahl kann nach Gruppen durchsucht werden.

Für Variablen, die einen Ersatzwert unterstützen, wird zusätzlich das Feld Ersatztext eingeblendet. Der Ersatztext wird auf zulässige Inhalte geprüft. Im Editor werden Variablen als nicht editierbare Elemente angezeigt; bei einem Ersatztext erscheint beispielsweise:

Variablenname - "Ersatztext"

Eine gültige Variable wird grün, eine nicht mehr bekannte Variable rot markiert. Nicht gefundene Variablen werden zusätzlich unterhalb des Editors aufgelistet.

Spaltendialog

Der Dialog erstellt Layouts mit mindestens zwei und höchstens sechs Spalten. Für jede sichtbare Spalte wird ein Gewicht zwischen 1 und 99 eingegeben. Die Gewichte bestimmen die relativen Breiten, nicht direkt die Prozentwerte:

• Aus den Gewichten werden automatisch Prozentwerte für die Spalten berechnet.
• Die Vorschau zeigt die daraus entstehenden Anteile.
• Die Werte werden auf zwei Nachkommastellen gerundet. Die letzte Spalte wird anschließend korrigiert, damit die Summe genau 100 % ergibt.

Beispiel: Die Gewichte 1, 2, 1 ergeben die Breiten 25 %, 50 % und 25 %. Nach dem Einfügen wird der Cursor in den ersten Absatz der ersten Spalte gesetzt.

Hintergrundbereich-Dialog

Der Dialog enthält eine Auswahl der verfügbaren Hintergrundfarben. Beim Einfügen wird ein eigener, über die verfügbare Breite laufender Bereich mit einem leeren Absatz angelegt. Befindet sich die Auswahl bereits in einem Hintergrundbereich, wird mit Übernehmen nur dessen Farbe aktualisiert.

Bilddialog

Der Bilddialog wird nach dem Hochladen eines Bildes automatisch geöffnet. Er zeigt eine Vorschau und die verfügbaren Einstellungen. Änderungen erscheinen sofort in der Vorschau, werden aber erst mit Übernehmen gespeichert. Abbrechen verwirft alle Änderungen.

Bild hochladen

Beim Hochladen passiert Folgendes:

1. Es werden nur PNG-, JPG- und JPEG-Dateien akzeptiert.
2. Die Größe des Bildes wird automatisch erkannt.
3. Der Dateiname ohne Dateiendung wird als Vorschlag für Alternativtext und Titel verwendet. Unter- und Bindestriche werden dabei durch Leerzeichen ersetzt.
4. Die erkannte Größe wird zunächst in Bildpunkten eingesetzt, zum Beispiel 640 Bildpunkte breit und 360 Bildpunkte hoch.
5. Kann die Größe nicht erkannt werden, wird das Bild zunächst so breit wie der verfügbare Bereich und in der passenden Höhe angezeigt.
6. Erst nach Übernehmen wird das Bild eingefügt. Bei Abbrechen bleibt der Editor unverändert.

Felder im Bilddialog

Bereich	Feld	Bedeutung
Barrierefreiheit	Alternativtext	Kurze Beschreibung für Personen, die das Bild nicht sehen können. Das Feld ist optional, sollte bei jedem wichtigen Bild aber ausgefüllt werden.
Barrierefreiheit	Titel	Optionaler Text, der beim Verweilen des Mauszeigers angezeigt wird. Er ersetzt nicht den Alternativtext und macht das Bild nicht zu einem Link.
Abmessungen	Breite	Legt fest, wie breit das Bild angezeigt wird.
Abmessungen	Höhe	Legt fest, wie hoch das Bild angezeigt wird.
Abmessungen	Maximale Breite	Begrenzt die Größe nach oben. Der Wert 100% sorgt dafür, dass das Bild nicht breiter als der verfügbare Bereich wird.
Abmessungen	Maximale Höhe	Begrenzt die Höhe nach oben. Mit none wird keine zusätzliche Höhengrenze gesetzt.
Layout	Darstellung: Block	Das Bild steht in einer eigenen Zeile.
Layout	Darstellung: Inline	Das Bild kann zusammen mit Text und anderen Bildern in einer Zeile stehen.
Layout	Ausrichtung	Positioniert ein Bild links, mittig oder rechts. Bei Bildern in einer Textzeile wird die ganze Zeile ausgerichtet.
Abstände	Außenabstand oben, unten, links, rechts	Fügt auf jeder Seite des Bildes zusätzlichen Abstand ein.
Darstellung	Eckenradius	Rundet die Bildecken ab. 0 ergibt eckige Ecken.

Bei einem neuen Bild gelten normalerweise diese Startwerte:

Einstellung	Startwert
Breite	erkannte Bildgröße; falls nicht ermittelbar: 100%
Höhe	erkannte Bildgröße; falls nicht ermittelbar: auto
Maximale Breite	100%
Maximale Höhe	none
Darstellung	Block, also eigene Zeile
Ausrichtung	Links
Eckenradius	0
Außenabstände	0 auf allen Seiten

Zulässige Größenangaben

In den Feldern Breite, Höhe, Maximale Breite, Maximale Höhe, den Außenabständen und beim Eckenradius wird jeweils nur eine einzelne Angabe eingetragen. Für die meisten Fälle reichen diese beiden Möglichkeiten:

Angabe	Beispiel	Einfache Erklärung
Bildpunkte (px)	640px	Eine feste Größe. Das Bild wird genau 640 Bildpunkte breit oder hoch angezeigt.
Prozent (%)	75%	Ein Anteil am verfügbaren Bereich. 75% nutzt drei Viertel der möglichen Breite oder Höhe.

Zusätzlich werden folgende Angaben akzeptiert:

• auto: Die passende Größe wird automatisch gewählt. Das ist besonders für die Höhe nützlich, wenn das Bild seine Proportionen behalten soll.
• none: Es wird keine zusätzliche Obergrenze gesetzt. Dieser Wert ist vor allem für Maximale Höhe gedacht.
• 0: Es wird kein Platz beziehungsweise kein Abstand verwendet.
• em, rem, vw und vh: relative Größen. Sie ändern sich abhängig von der Schriftgröße oder der Größe des Browserfensters. Für normale Inhalte sind px und % einfacher und meistens ausreichend.

Negative Werte, Rechenangaben und mehrere Angaben im selben Feld werden nicht akzeptiert. Bei einer ungültigen Eingabe kann das Bild nicht übernommen werden, bis der Wert korrigiert wurde.

Was passiert beim Übernehmen?

• Beim Bearbeiten eines vorhandenen Bildes werden die neuen Einstellungen auf dieses Bild angewendet. Das Bild selbst wird nicht ausgetauscht.
• Sind Breite und Höhe in Bildpunkten angegeben, bleibt das Seitenverhältnis des Bildes erhalten.
• Die Maximale Breite 100% sorgt dafür, dass ein Bild auf kleinen Bildschirmen nicht aus dem verfügbaren Bereich herausragt.
• Eine Kombination aus Breite 100% und beispielsweise Maximale Breite 640px bedeutet: Das Bild darf höchstens 640 Bildpunkte breit sein, wird bei einem schmaleren Bereich aber automatisch kleiner.
• Bei Darstellung: Block steht das Bild in einer eigenen Zeile. Bei Darstellung: Inline kann es neben Text oder weiteren Bildern stehen.
• Bei einem Blockbild wirkt die Ausrichtung auf das Bild selbst. Bei einem Inline-Bild wird die Zeile ausgerichtet, in der das Bild steht.
• Die vier Außenabstände werden getrennt angewendet. So kann beispielsweise nur unterhalb des Bildes zusätzlicher Abstand eingestellt werden.

Für ein übliches, anpassungsfähiges Bild sind folgende Einstellungen sinnvoll:

• Breite: 100%
• Höhe: auto
• Maximale Breite: zum Beispiel 640px
• Maximale Höhe: none
• Darstellung: Block
• Ausrichtung: Links