Anleitung | Text/HTML Editor verwenden

Für die Erfassung der Inhalte setzen wir einen Text bzw. HTML Editor ein. Der Editor ermöglicht Ihnen, ohne HTML Kenntnisse, diverseste HTML Bausteine einzufügen. Nachfolgend werden die Hauptfunktionen – Text inkl. Textlinks, Bilder und Videos – erläutert.

Allgemeines

Der Editor lässt sich wie ein üblicher Text-Editor (Word, Pages, usw.) verwenden. Aus Ihrer Eingabe wird im Hintergrund ein HTML-Code erzeugt. Sie können bspw. Texte eingeben, Wörter oder ganze Paragraphen markieren und formatieren, Textlinks hinzufügen, Bilder einfügen und bei Bedarf mit einem Link versehen, Videos einfügen, uvm.

Grundsätzlich müssen Sie immer erst ein Element markieren, um anschließend die Funktion eines der Schalter anwenden zu können. Nachfolgend die Auflistung der Schalter und ihrer Bedeutung.

Text formatieren: Fett, Kursiv, Unterstrichen, Hoch- und Tiefgestellt und Durchgestrichen
Formatierung für den markierten Text bzw. Bereich zurücksetzen
Eine der vordefinierten Schriftarten verwenden. Standardmäßig wird „Lato“ verwendet
Die Schriftgröße auswählen bzw. ändern
Die Hintergrund- bzw. Textfarbe setzen
Eine ungeordnete Liste erstellen (sog. Bulletpoint Liste)
Eine geordnete (nummerierte) Liste erstellen
Den Absatz Text ausrichten: Links, Zentriert, Rechts oder Blocksatz
Die Zeilenhöhe einstellen
Eine Tabelle erzeugen
Einen Textlink einstellen
Ein Bild hinzufügen
Ein Video hinzufügen
Das Editor Fenster maximieren (in den Vollbild-Modus schalten)
Den Quellcode anzeigen. Hier können Sie den erzeugten HTML Code sehen und bei Bedarf auch bearbeiten.

Wenn Sie HTML und CSS Kenntnisse haben, können Sie im Editor sämtliche HTML Elemente verwenden und mittels CSS auch formatieren.

Wie bei den bekannten Text-Editoren wird mittels „ENTER“ ein neuer Absatz (mit oder ohne Abstand) erzeugt. Mit der Tastenkombination „SHIFT“ + „ENTER“ erzeugen Sie einen Zeilenumbruch.

Der Editor verwendet Tool-Tips. Halten Sie die Maus über den gewünschten Schalter, damit Sie ihre Funktion sehen können. Sofern verfügbar, wird auch die hinterlegte Tastenkombination angezeigt.

Achtung bei Copy & Paste

Wir verstehen, dass Sie sich Arbeit ersparen wollen, indem Sie beispielsweise vorgefertigte Texte (aus Word, aus Excel oder aus einer Webseite) in den Text-Editor hineinkopieren, jedoch können bereits fremdformatierte Texte unter bestimmten Umständen die Funktionalitäten des Text-Editors beeinträchtigen.

Bitte achten Sie deswegen darauf, dass Sie entweder ausschließlich mit den vorhandenen Funktionen des Text-Editors arbeiten oder den hineinzukopierenden Text in einer unformatierten Version einfügen und erst anschließend mit den Schaltern des Text-Editors umgestalten. Damit verhindern Sie, dass es nicht zu Konflikten zwischen Ihrer vorformatierten Kopiervorlage und den Funkionalitäten des Text-Editors kommt.

Sofern Sie doch mal einen fremdformatierten Text in den Text-Editor hineinkopieren sollten und dieser lässt sich dann nicht mehr vollständig umgestalten, können Sie das Radiergummi-Symbol (Ziffer 2) nutzen, um Ihre Formatierung zu entfernen. In den meisten Fällen könnte das bereits weiterhelfen.

(Text)Links einfügen

Wenn Sie den Schalter „Link“ anklicken (siehe Punkt 11 in der Übersicht) erscheint ein Fenster, in das Sie folgende Informationen angeben können:

Linktext eingeben
Dieses Feld ist bereits ausgefüllt, wenn Sie einen Textbereich markieren und danach den „Link“ Schalter klicken.
URL eingeben
Geben Sie die URL der Zielseite ein, inkl. Protokoll Angabe. Die URL sollte deshalb immer komplett hinterlegt werden, also auch mit http:// bzw. https:// beginnen.
Beispiel: https://www.example.com/ (richtig) | www.example.com (falsch)
Link Ziel angeben
Aktivieren Sie die Checkbox, wenn sich die verlinkte Seite in einem neuen Fenster bzw. Tab öffnen soll. Dies ist die Standardeinstellung.

Wenn Sie den Schalter „Link“ anklicken, bevor Sie eine Textpassage markieren, können Sie den anzuzeigenden Linktext und die Zielseiten-URL direkt eingeben. Ansonsten wird die markierte Textpassage als Linktext automatisch übernommen.

Sie können diese Technik auch verwenden, damit Sie „schönere“ Links in den Mailtexten anzeigen. Die Mailtexte werden auch mittels Editor befüllt.

Videos einfügen

Wenn Sie den Schalter „Video“ anklicken (siehe Punkt 13 in der Übersicht), erscheint ein Fenster, in das Sie die URL des Videos eingeben können. Unterstützt werden die Standardvidoelinks unterschiedlicher Plattformen wie YouTube, Vimeo usw. (keine Short-Videos, Reels, etc…).

Alternativ können Sie auch den Embed-Code des Videos selbst eintragen. Den HTML-Code erhalten Sie i. d. R. wenn Sie auf „Teilen“ Button (im oder unterhalb des Videos) klicken. Um den HTML-Code einzugeben, schalten Sie im Editor in die HTML-Ansicht (siehe Punkt 15 in der Übersicht).

Bilder einfügen

Wenn Sie den Schalter „Bild“ anklicken (siehe Punkt 12 in der Übersicht), erscheint ein Fenster, in das Sie folgende Informationen angeben können:

Bilddatei hochladen
Klicken Sie auf den „Dateien auswählen“ Schalter und wählen Sie das gewünschte Bild vom Ihrem Computer aus.
Bild URL eingeben
Geben Sie die URL des Bildes ein, inkl. Protokoll Angabe. Die URL sollte deshalb immer vollständig eingetragen werden, also z.B. mit http:// bzw. https:// beginnen.
Beispiel: https://www.example.com/pfad/zu/meinem/Bild.jpg
Bitte beachten Sie, dass das Bild öffentlich erreichbar sein muss, ohne der Eingabe von Zugangsdaten.

Bilder einfügen — Details und Beispiele

Nachfolgend wird das Einfügen eines Bildes bzw. mehrerer Bilder sowie die Anpassung der Schnelloptionen und Eigenschaften beschrieben. Die 4 vordefinierten Klassen, die Sie auswählen können, werden am Ende aufgelistet.

1. Bild(er) einsetzen

Um ein oder mehrere Bilder in den Editor einzusetzen folgen Sie diesen einfachen Schritten.

Laden Sie ein Bild hoch oder geben Sie die URL zu einem selbst gehosteten Bild an
Klicken Sie das angezeigte Bild an
Beachten Sie die Schnelloptionen, die Ihnen angezeigt werden (von links nach rechts)
- Bildeigenschaften anzeigen
- Maximale Bildbreite auf 100 %, 50 %, 25 %, oder Originalgröße setzen
- Bild links- oder rechtsbündig setzen
- Bild ohne Textfluss setzen (links- bzw. rechtsfluss wieder entfernen)
- Bild entfernen

Sollten Sie ein Bild hochladen, aber dieser wird nicht angezeigt, dann sollten Sie zuerst in den Content-Bereich des Editors klicken.
Somit ist sichergestellt, dass der Editor „aktiv“ ist. Versuchen Sie nun das Bild erneut hochzuladen.

2. Bildeigenschaften ansehen/bearbeiten

Wenn Sie auf den Stift klicken, erscheint ein Fenster mit sämtlichen einstellbaren Eigenschaften.

Geben Sie den (die) Namen der Klasse(n) an, die Sie diesem Bild zuweisen wollen.
Hierbei handelt es sich entweder um Klassen, die Sie im CSS Bereich definiert haben, oder um vordefinierte Klassen des Editors (siehe Punkt 3)
Geben Sie hier CSS-Anweisungen direkt an (genannt inline CSS), getrennt durch ein Strichpunkt „;“.
Bsp: color: blue; background: yellow; font-size: 18px; usw.
Wählen Sie bei Bedarf eine bereits vordefinierte Klasse aus. Nach Auswahl erscheint die Klasse im CSS-Klasse Feld (siehe Punkt 1)
Geben Sie die URL ein, falls das Bild anklickbar sein soll
Falls Sie eine URL eingegeben haben, können Sie hier das Verhalten der Zielseite bestimmen
- Zielseite öffnet sich im aktuellen Tab/Fenster (Standardverhalten)
- Zielseite öffnet sich in einem neuen Tab/Fenster (empfohlene Einstellung)
- Zielseite öffnet sich im Elternfenster (wird selten verwendet)
- Zielseite öffnet sich in einem ganzen Tab/Fenster (wird selten verwendet)

3. Vordefinierte Klassen | Übersicht

Nachfolgend werden die vordefinierten Bildklassen des Editors beschrieben:

„Miniaturansicht“
Ermöglicht mehrere Bild hintereinander anzuzeigen. Die Bilder haben einen grauen Rahmen.
„responsiv“
Die Bilder werden untereinander platziert und können eine max. Breite von 100 % haben.
„abgerundet“
Die Bilder sind leicht abgerundet an allen Ecken.
„Kreis“
Die Bilder sind stark abgerundet. Wenn das Bild quadratisch ist, dann erscheint es als Kreis, sonst oval.

In der Übersicht sehen Sie alle vordefinierten Klassen. Der Klassenname steht in Klammern.

Editor – vordefinierte Klassen für Bilder