Der RTE bietet eine breite Palette an Formatierungsmöglichkeiten für Textinhalte. Die Anwenderoberfläche ähnelt bekannter Textverarbeitungssoftware wie Word, sodass sich die Bedienung intuitiv gestaltet. Die eingefügten Formatierungen werden automatisch in HTML-Befehle umgesetzt. Im TYPO3 Backend lässt sich schon annäherungsweise das Erscheinungsbild des Textes erkennen, es ist jedoch unerlässlich Änderungen auch im Frontend zu überprüfen.
Auch wenn die Bedienung des Editors stark an andere Textverarbeitungsprogramme erinnert, möchten wir Ihnen alle Funktionen kurz vorstellen.
Textformatierung
Stil
Es gibt drei verschiedene Stilarten. In einem normalen Text sind zwei Stile verfügbar: Blockstile und Inline Stilarten. Zur dritten Stilart kommen wir in den Abschnitten zu Links und Tabellen.
Der entscheidende Unterschied zwischen den beiden immer vorhandenen Stilen ist der Bereich auf den sie sich auswirken. Blockstile gelten immer für einen ganzen Absatz. Um einen Blockstil einzustellen, muss man im Editor nur in den Absatz klicken, der formatiert werden soll und wählt im Anschluss im Dropdown Menü den gewünschten Stil. Ein ganzer Absatz ist so von der Änderung betroffen, ohne dass man etwas markieren muss. Das heißt auch, dass sich Textabschnitte in einem anderen Absatz befinden müssen, wenn sie anders/normal formatiert werden sollen. Folgende Blockstile stehen zur Auswahl:
- Header 1-6 (Überschriften)
- Bereich – Normal/Groß/Klein (in den Screenshots unten) zu sehen
- Size: Lead (ganzen Abschnitt in größerer Schriftgröße)
- Alert: Danger/Success/Warning/Info (wie normaler Bereich, nur farbig)
- Spacer: 15 px/30 px/45 px/60 px/75 px/ 90px (definierter Abstand zwischen zwei Absätzen)
Um Inline Stilarten anzuwenden, müssen entsprechende Bereiche, Sätze oder Wörter dafür markiert werden. Danach wählen Sie, wie auch bei Blockstilen die Formatierung aus dem Dropdown Menü aus (für Inline Stilarten scrollen Sie einfach weiter nach unten im Stil-Menü). Folgende Stilarten stehen Ihnen zur Verfügung (alle sind in den Screenshots zu sehen, sowie auf unserer Vorschau-Seite):
- Size: Small (kleine Schriftgröße)
- Color: Muted/Primary/Success/Info/Warning/Danger/Default (Textfarbe)
- Label: Default/Success/Warning/Danger/Info/Badge (Markierung)
Die Farben der verschiedenen Stile entsprechen den Standard-Einstellungen der Website-Base. Der Design-Konfigurator ermöglicht es Ihnen diese Farben individuell an Ihr Corporate Design anzupassen.
Wenn Sie einen Stil entfernen möchten, klicken Sie in die betroffene Stelle im Text und wählen im Dropdown Menü auf das bereits genutzte Format. Sollte das nicht funktionieren, gibt es zwei weitere Arten eine Formatierung zu löschen. Wir stellen Sie Ihnen in den Abschnitten Formatierung entfernen und Quellcode vor.
Absatzformat
Das zweite Dropdown-Menü ist das Absatzformat. Es gibt nur zwei Optionen: Normal und Formatiert. Standardmäßig ist immer 'normal' eingestellt. Ein formatierter Absatz hat im Frontend keine Umbrüche und kann horizontal gescrollt werden.
Fett, Kursiv, Tiefgestellt, Hochgestellt & Listen
Fett, kursiv, tiefgestellt, hochgestellt und Listen sind typische Optionen in gebräuchlichen Textbearbeitungsprogrammen. Sie werden im RTE genauso angewendet, wie in anderen Programmen.
- Markieren Sie das Zeichen, Wort, die Wortgruppe oder die Zeile, die fett, kursiv, tiefgestellt, hochgestellt oder als Listen dargestellt werden sollen.
- Um die Formatierung wieder zu entfernen, klicken Sie in ein formatiertes Wort oder einen Listeneintrag bzw. markieren eine betroffene Wortgruppe und 'schalten die Option aus', indem Sie einfach wieder auf das gewählte Icon nutzen.
- Für Listen können Sie alternativ eine neue Zeile beginnen und dann eine der beiden Listenoptionen anwählen. Jede weitere Zeile ist ein neuer Listeneintrag.
- Mehrere Formatierungen lassen sich problemlos miteinander zu kombinieren.
- Zwei weitere Möglichkeiten eine Formatierung zu entfernen, sind die Option Formatierung entfernen und der Quellcode.
Textausrichtung
Linksbündig, Zentriert, Rechtsbündig und Blocksatz
Auch die Textausrichtung lässt sich individuell für jeden Absatz gestalten. Klicken Sie dafür einfach in einen Absatz und wählen Sie die Ausrichtung. Soll der Text wieder anders ausgerichtet werden, wählen Sie einfach eine andere Option. Die Ausrichtung lässt sich auch mit Formatierung entfernen und im Quellcode ändern. Standardmäßig ist der Text linksbündig.
Zitatblock
Mit einem Zitatblock lassen sich Zitate auf eine besondere Art und Weise hervorheben.
Formatierung entfernen
Markieren Sie den Bereich im Text, wo die Formatierung entfernt werden soll und nutzen den Button für Formatierung entfernen. Jede Formatierung wird dadurch entfernt. Bereiche und Links bleiben bestehen, diese kann man im Quellcode-Modus entfernen.
Verlinkungen
Einen Link einfügen/editieren
Um Text zu verlinken, markieren Sie ein Wort oder eine ganze Wortgruppe und gehen auf das Link-Icon. Der Link-Browser öffnet sich. Dieser besitzt sechs Tabs. Über jeden Reiter lässt sich ein Link einfügen, sie unterscheiden sich nach der Art des einzufügenden Links: Seite, Datei, Ordner, Externe URL, E-Mail, Telefon.
Das Verlinken funktioniert im Grunde immer gleich. Am meisten werden Sie wahrscheinlich mithilfe des ersten Tabs verlinken – hier setzen Sie interne Links, also Links, die auf URLs Ihrer Homepage verweisen.
Legen Sie ganz oben im Link-Browser fest, ob der Link in einem neuen Tab/Fenster geöffnet werden soll. Wenn Sie an der Stelle nichts auswählen, wird der Link im aktuellen Browser-Tab geöffnet. Der Titel des Linkes wird angezeigt, wenn ein User mit der Maus über dem Link stehen bleibt.
Einen internen Link fügen Sie folgendermaßen ein:
- Wählen Sie das Zielfenster und vergeben Sie einen Titel.
- Klappen Sie den Seitenbaum im linken Bereich des Link-Browsers auf (Klick auf den Pfeil links).
- Wählen Sie:
- eine Seite mit einem Klick auf den Seitennamen
- oder einen Seiteninhalt, indem Sie mit auf den umrandeten Pfeil links neben dem Seitennamen klicken und dann im rechten Bereich des Link-Browsers einen Inhalt verlinken.
- Um einen Link zu bearbeiten, klicken Sie im Text in den Link rein und öffnen mit dem Link-Button den Link-Browser.
- Um einen Link zu entfernen, gehen Sie im Text auf den Link und betätigen dann das zweite Link-Icon mit dem Kreuz.
Im rechten Browser-Bereich werden Inhalte einer Seite mit den vergebenen Header gelistet. Um Inhalte eindeutig identifizieren zu können, muss jedes Inhaltselement eine individuelle Überschrift haben (diese kann auch verborgen werden).
Für Links öffnet sich ein neuer Objektstil. Mit diesem können Links als Buttons dargestellt werden.
Im Frontend werden Links (normale Links und Link-Buttons) durch einen Hover-Effekt kenntlich gemacht.
Tabellen
Tabelleneigenschaften
Tabellen lassen sich ähnlich wie in einem Textverarbeitungsprogramm erstellen. Sie wählen am Anfang, aus wie vielen Zeilen und Spalten die Tabelle bestehen soll. Zu jeden Zeitpunkt können Sie Zeilen und Spalten hinzufügen oder Zellen verbinden. Ihnen stehen also alle typischen Optionen zum Bearbeiten einer Tabelle zur Verfügung. Zu den Optionen gelangen Sie, wenn Sie mit einem Rechtsklick in die Tabelle gehen und im erschienen Menü die Tabelleneigenschaften wählen. Folgende Werte können angepasst werden:
- Kopfzeile: keine, erste Zeile, erste Spalte oder beide
- Kopfzeilen sind anders formatiert als andere Zellen und Inhalte.
- Rahmengröße: Freifeld zum Eintragen des Wertes (in px)
- Bestimmt die Dicke des Außenrahmens.
- Ausrichtung: nicht festgelegt, links, zentriert, rechts
- Legt Ausrichtung der Tabelle fest.
- Um Text auszurichten, nutzen Sie die Optionen in der Bearbeitungspalette über dem Textfeld oder die Zelleneigenschaften.
- Überschrift: Freifeld zum Eintragen eines Titels
- Dieser erscheint über der Tabelle und kann wie normaler Text bearbeitet und ausgerichtet werden.
- Inhaltsübersicht: Freifeld zum Eintragen einer Inhaltsübersicht
- Ist im Frontend nicht zu sehen.
Zelleneigenschaften
Einzelne oder mehrere Zellen lassen sich ebenfalls in den Zelleneigenschaften bearbeiten. Gehen Sie dafür mit einem Rechtsklick in eine Zelle oder markieren Sie mehrere Zellen und nutzen im Anschluss den Rechtsklick. Im erschienen Menü gehen Sie dann auf Zelle > Zelleneigenschaften. Folgendes können Sie hier anpassen:
- Zeilenumbruch: ja, nein
- Horizontale Ausrichtung: nicht festgelegt, links, zentriert, rechts, Blocksatz
- Richtet den Text in der Zeile horizontal aus.
- Kann auch über die sichtbaren Bearbeitungsoptionen über dem Textfeld ausgerichtet werden. In den Zelleneigenschaften wird dann trotzdem 'nicht festgelegt' ausgewählt sein, auch wenn im Frontend der Text entsprechend ausgerichtet ist.
- Vertikale Ausrichtung: nicht festgelegt, oben, Mitte, unten, Grundlinie
- Richtet den Text vertikal aus.
- Zellart: Daten, Überschrift
- Im Gegensatz zu den Tabelleneigenschaften können Sie hier einzelne Zellen als Header formatieren.
- Hintergrundfarbe & Rahmenfarbe: Freifeld zum Eintragen eines Farbcodes (z. B. #000000 oder #FFFFFF)
- Legt die Hintergrund- und Rahmenfarbe der markierten Zellen fest.
Wenn Sie sich in einer Tabelle befinden, werden Tabellen-Objektstile verfügbar. Hier können Sie das Gesamterscheinungsbild festlegen, also ob die Zeilen abwechselnd gefärbt sind, die Tabelle einen sichtbaren Rahmen hat oder einzelne Zellen/Zeilen hervorheben.
Weitere Funktionen
Ausschneiden, Kopieren & Einfügen
Ein Text kann, wie mit anderen Programmen, mit STRG + C kopiert, mit STRG + X ausgeschnitten und mit STRG + V eingefügt werden. Das können Sie im RTE statt mit Tastatur-Befehlen auch mit Buttons über dem Textbereich machen.
Zusätzlich können Sie Texte aus der Zwischenablage als Klartext einfügen oder aus Word einfügen. Diese beiden Optionen werden allerdings nicht von allen Browsern unterstützt.
Beim Einfügen von Texten sollte man außerdem beachten, dass sich ursprüngliche Formatierungen 'einschleichen' könnten. Fügen Sie deswegen Text im Quellcode-Modus ein oder nutzen Sie als Zwischenschritt einen einfachen Texteditor, der unerwünschte Formatierungen und Sonderzeichen eliminiert.
Rückgängig & Wiederherstellen
Sie können jederzeit im Text einige Schritte zurückgehen oder wiederholen. Nutzen Sie dafür die Tastenkombinationen STRG + Z für rückgängig und STRG + Y für wiederherstellen oder verwenden Sie die entsprechenden Pfeile im RTE.
Horizontale Linie einfügen
Mit einer horizontalen Linie kann man Inhalte optisch voneinander trennen, wie es unten im Screenshot zu sehen ist.
Sonderzeichen einfügen
Bei Bedarf können jederzeit Sonderzeichen in den Text eingefügt werden. Nutzen Sie einfach das Icon für die Sonderzeichen und es erscheint ein Fenster mit der Auswahl. Klicken Sie das benötigte Zeichen an: Das Fenster schließt sich und das Sonderzeichen befindet sich nun im Text.
Maximieren
Normalerweise wird der RTE im Bearbeitungsmodus von Inhaltselementen oder Seiten angezeigt, mit allen Bearbeitungsoptionen, die sich oberhalb und unterhalb des Editors befinden. Insgesamt ist er dabei nur 500 px hoch. Um die Ansicht des RTEs zu vergrößern und alle anderen Optionen auszublenden, maximieren Sie einfach den Editor. Das bewirkt, dass im ganzen Inhaltsbereich nur noch der Editor und seine Optionen zu sehen sind. Besonders bei langen Texten kann es sinnvoll sein, diese Option zu nutzen.
Bei einem weiteren Klick auf das Icon gelangen Sie wieder zur normalen Ansicht.
Quellcode
Den Quellcode braucht man als Redakteur:in im Grunde nicht, manchmal kann es jedoch von Vorteil sein, diesen Modus zu haben z. B. beim Einfügen von Texten oder zum Entfernen unerwünschter Formatierungen.
Beim Einfügen von Texten schalten Sie einfach auf Quellcode um und fügen den Text ein, somit werden keine Formatierungen übertragen oder Sonderzeichen gesetzt. Im normalen Modus kann der Text dann wie gewohnt bearbeitet werden.
Selbst wenn Sie den Text erst im Editor schreiben und bearbeiten, können sich z. B. geschützte Leerzeichen einschleichen, die zu unschönen Absätzen führen können. Diese sehen Sie im Normalmodus nicht, aber sie wirken sich auf das Erscheinungsbild des Textes im Frontend aus. Im Quellcode halten Sie dafür Ausschau nach dem Code-Schnipsel: . Diesen müssen Sie vor allem dann entfernen, wenn er sich mitten im Text befindet.
Manchmal kann ein geschütztes Leerzeichen jedoch auch sinnvoll sein, wenn z. B.bestimmte Wortgruppen oder Zahlen mit dazugehöriger Einheit nicht voneinander getrennt werden sollen. In solchen Fällen können sie im Quellcode-Modus diese Zeichenfolge bewusst nutzen.
Sie wollen mehr wissen?
Alle Informationen zu den verfügbaren Editionen finden Sie auf der Webseite für unsere TYPO3 Website-Base. Sie haben die Möglichkeit eine Webseite zum Fixpreis erstellen zu lassen oder entscheiden sich für ein Website as a Service Paket, mit dem keine weiteren Kosten für Hosting oder Sicherheits- und Funktionsupdates auf Sie zukommen werden.