zum Inhalt springen

Der Rich-Text-Editor in TYPO3

Der Rich Text Editor (RTE) ist ein zentraler Bestandteil von TYPO3. Er wird immer dann eingeblendet, wenn Sie in einem Element Texte bearbeiten und es möglich ist den Inhalt zu formatieren.

Sofern in Ihrem System die Uzk2015-Erweiterung installiert ist, sehen Sie eine speziell für Systeme der Universität zu Köln optimierte Version des Rich-Text-Editor:

  • Sie finden Formatierungsoptionen vor, die entsprechend des Corporate Design gestaltet sind.
  • Auf einem älteren System würden Sie Text noch mit exakten Vorgaben formatieren (etwa "Arial, 14pt, grau, kursiv" oder Ähnliches). Das ist problematisch, weil Text, der auf einem PC gut aussieht, auf einem Smartphone oft schwer lesbar oder gar nicht zu nutzen ist. Die Universität verwendet deshalb ein so genanntes Responsive Design, das heißt die Seite passt sich optisch dem Bildschirm an auf welchem sie angezeigt wird. Sie weisen Text einfach eine Funktion oder Eigenschaft wie "wichtig" oder "Überschrift zweiter Ebene" zu und die Software wählt dann vollautomatisch die für das jeweilige Anzeigegerät optimale Formatierung.

Generell lässt sich der Rich-Text-Editor sehr einfach bedienen und funktioniert ähnlich wie Word: Sie formatieren Text indem Sie ihn zunächst markieren und dann im Menü Formatoptionen auswählen.

Überschriften verschiedener Ebenen

Sie können eine Einzelseite strukturieren indem Sie den Inhalte durch Überschriften gruppieren. Sollten Sie sehr viele Überschriften benötigen, ist es jedoch oft sinnvoll den Inhalt auf mehrere Seiten zu verteilen oder Inhaltselemente wie das Accordion zu verwenden.

Jede Seite sollte genau eine Überschrift der Ebene 1 haben. Das ist für Suchmaschinen wichtig, die diese Überschrift als Hinweis auf den Seiteninhalt heranziehen und oft in den Suchergebnissen anzeigen. Sie können Überschriften der Ebenen 2 bis 5 für eine feinere Unterteilung nutzen.

Mit Hilfe des RTE können Sie innerhalb eines einzelnen Text-Elements Überschriften der Ebenen zwei bis fünf setzen um Ihren Text zu strukturieren. Markieren Sie dazu die entsprechende Zeile mit der Maus und wählen Sie aus dem Drop-Down-Menü aus. Dabei entspricht "Heading 2" einer Überschrift zweiter Ebene (und so weiter).

Allerdings ist es sinnvoller längere Texte in mehrere einzelne Textelemente zu zerlegen. Jedem Textelement geben Sie per se eine Überschrift und können hier zwischen der gewünschten Ebene und "hidden" (unsichtbare Überschrift) wählen. Im Frontend ist zwischen den beiden Varianten kein Unterschied zu sehen, aber das Zerlegen in mehrere Text-Elemente hat eine Reihe von Vorteilen:

vergrößern:
Falls Sie anstatt eines weiteren Text-Elements eine weitere Überschrift innerhalb setzen möchten, dann markieren Sie zunächst den Text, der als Überschrift dienen soll. Dann finden Sie in der oberen Menüzeile des RTE zwei Drop-Down-Menüs. Im linken von beiden können Sie nun auswählen, welche Ebene die neue Überschrift haben soll. Ihnen stehen hier die Ebenen zwei bis fünf zur Verfügung.

Text- und Absatzstile setzen

Ein Absatz kann immer nur einen einzigen Absatzstil haben. Es ist nicht möglich Absatzstile zu kombinieren. Allerdings können innerhalb eines Absatzes mehrere Textstile Anwendung finden.

Sie sollten nicht zu viele Stile auf einer einzelnen Seite mischen. Der Textstil "Wichtig" (wie hier) sollte sparsam eingesetzt werden, um Inhalte besonders hervorzuheben.

Sie finden eine Vielzahl allgemeine Absatz- und Textstile vor und daneben gibt es noch Stile in den offiziellen Farben der jeweiligen Fakultät. Alle verfügbaren Stile können Sie auf der Beispielseite ansehen.

vergrößern:
In der oberen Menüzeile des RTE finden Sie zwei Dropdown-Menüs. Wenn Sie einen Text- oder Absatzstil verwenden möchten, markieren Sie zunächst den zu formtierenden Text. Dann wählen Sie im rechten der beiden Drop-Down-Menüs den geünschten Stil aus.

Bestehende Formatierung entfernen / Copy-und-Paste aus Microsoft Word

Wenn Sie Ihren Text anders formatieren möchten, sollten Sie zunächst die bestehende Formatierung entfernen. Dafür müssen Sie nicht den HTML-Code bearbeiten, sondern es gibt eine praktische eingebaute Funktion:

  • Markieren Sie den betroffenen Absatz mit der Maus.
  • Dann betätigen Sie in der oberen Menüzeile des RTE die Schaltfläche mit dem Tool-Tip "Remove Format", die Sie links neben den Schaltflächen für Aufzählungen finden.
  • Speichern Sie und er Text wird wieder normal formatiert angezeigt.

Ein häufiger Anwendungsfall hierfür ist das Einfügen von Text aus Word über die Zwischenablage. TYPO3 kopiert hierbei nämlich nicht nur den Text, sondern gleich dessen ganze Formatierung (Schriftart, Textgröße, Farbe, et cetera). Hier haben Sie drei Möglichkeiten:

  1. Entfernen Sie die Formatierung in der gerade beschriebenen Weise.
  2. Einfacher: Benutzen Sie die Funktion "Paste from Word" des Rich-Text-Editor:

    • Kopieren Sie den Text aus Word in die Zwischenablage.
    • Fügen Sie den Text nicht mit Strg+V ein, sondern über den Button mit dem Tooltip "Paste from Word" in der zweiten Menü-Reihe des RTE. Dieser sieht aus wie das Ablagesymbol mit einem "W" darauf und entfernt alle Word-Formatierungsbefehle aus dem Text.

  3. Deutlich umständlicher: Fügen Sie den kopierten Text zunächst in einen reinen Editor wie notepad oder notepad++ ein (nicht Open Office Writer oder ähnliches). Kopieren Sie ihn dort erneut und fügen Sie ihn dann in den RTE ein.
vergrößern:
Um die Formatierung eines Textes zu entfernen, markieren Sie ihn zunächst. Dann wählen Sie in der oberen Menüzeile den Button mit dem Tooltip "Remove Format" (1). Osfern Sie Text aus Word einfügen, benutzen Sie den entsprechenden Button in der unteren Menüzeile des RTE (2). Das erspart Ihnen den Zwischenschritt.

Elemente in den Text einfügen

Funktionen für barrierearme Seiten

Der Rich-Text-Editor unterstützt Sie dabei barrierearme Webseiten zu erstellen. Dazu können Sie:

Links und Downloads einfügen

Es gibt eine eigenständige Anleitung für das Einfügen von Links und Downloads. Gerade Links innerhalb Ihrer Webseite sollten Sie mit der entsprechenden TYPO3-Funktion setzen (statt absolut mit einer konkreten Adresse), damit TYPO3 die Verlinkung anpassen kann, falls der Inhalt verschoben wird.

Sonderzeichen einfügen

Wenn Sie in der zweiten Menüzeile des RTE die mit Omega beschriftete Schaltfläche auswählen, öffnet sich ein Dialog-Fenster mit einigen gebräuchlichen Sonderzeichen. Sie fügen diese einfach durch Anklicken in den Text ein.

vergrößern:
Wenn Sie in der zweiten Menü-Zeile des RTE den mit dem Omega-Zeichen beschrifteten Button betätigen, öffnet sich ein Menü mit verfügbaren Sonderzeichen. Wenn Sie ines davon anklicken, wird es an der Stelle Ihres Cursors eingefügt.

Tabellen einfügen

Tabellen sollten Sie auf Ihren Webseiten wenn möglich vermeiden. Sie sind schlecht für die Barrierefreiheit Ihrer Seite und können auch mit responsive Design auf Mobilgeräten oft nicht vernünfig angezeigt werden.

Sie können dennoch direkt im Rich-Text-Editor einfache Tabellen anlegen. Beachten Sie diesbezüglich bitte die dedizierte Anleitung zum Einfügen von Tabellen in TYPO3.

Bilder und Videos einfügen

Verwenden Sie den Rich-Text-Editor nicht um Bilder einzubetten. Von dieser Methode wurde immer abgeraten, seit Version 8 von TYPO3 funktioniert dies gar nicht mehr. Folgen Sie bitte unsere Anleitung zum Einbetten von Bildern.

Für die Einbettung von Videos unterstützen wir die wichtigsten Dienste (YouTube, Vimeo) und den hauseigenen Dienst. Betten Sie Videos bitte nicht über den RTE oder Code, sondern unbedingt über die speziellen Inhaltselemente zum Einbetten von Videos des UzK2015-Design ein.

Aufzählungen

Sie können sehr einfach Aufzählungen anlegen. Schreiben Sie zunächst die einzlnen Punkte untereinander auf. Markieren Sie diese. Dann wählen Sie in der oberen Menüzeile aus, ob Sie eine nummerierte Aufzählung oder einfache Bullet-Points möchten. Wenn Sie Unterebenen einfügen möchten, fügen Sie den Inhalt zunächst als Punkt in der Aufzählung ein. Dann erhöhen Sie den Einzug über den entsprechenden Button. Um den Punkt eine Ebene nach oben zu befördern, entfernen Sie den Einzug wieder über den Button daneben.

vergrößern:
Markieren Sie den Text, den Sie in eine Aufzählung umwandeln möchten. Wählen Sie dann die Art (nummeriert oder Bullet-Points). Dann kontrollieren Sie die Einrückung um Unter-Ebenen zu erzeugen.

Code formatiert anzeigen

Wenn Sie auf einer Webseite Code erläutern möchten, dann müssen Sie diesen so einbetten, dass der Browser weder die Formatierung ändert, noch versucht ihn zu interpretieren. Würden Sie beispielsweise auf dieser Seite HTML-Code einfach so eingeben, würde der Browser ihn ausführen. Wenn Sie stattdessen die Funktion "Insert Code Snippet" verwenden, können Sie einen Code-Block in seiner Textform darstellen. Etwa so:

<p>Das ist HTML-Code, der <i>nicht</i> interpretiert wird!</p>

Diese Funktion steht unter anderem für die Sprachen Bash, C++, HTML, Java, JavaScript, PHP, Python und SQL zur Verfügung. Um die Funktion zu nutzen, betätigen Sie die Schaltfläche mit dem Tooltip "Insert Code-Snippet" in der zweiten Reihe des Menü. Es öffnet sich ein Dialog wo Sie im Drop-Down-Menü die Sprache des Codes einstellen und diesen dann in das Textfeld darunter kopieren.

Sourcecode des Textelements anzeigen

Sie können sich innerhalb des Rich-Text-Editors den HTML-Sourcecode des Elements anzeigen lassen, welches Sie gerade bearbeiten. Sobald Sie auf die Sourcecode-Ansicht umschalten, stehen Ihnen die ganzen auf dieser Seite beschriebenen Funktionen nicht zur Verfügung bis Sie wieder zurückschalten.

Sie sollten nur mit dieser Ansicht arbeiten, wenn Sie genau wissen was Sie tun. Diese Funktion dient ausschließlich zur Fehlerbehebung für den seltenen Fall, dass der RTE fehlerhaften Code erzeugen sollte. Sie sollten auf keinen Fall eigenständig Code einfügen. Beachten Sie, dass TYPO3 nicht vorgesehene Code-Elemente filtert und Sie die Ansicht der Seite negativ beeinflussen können.

vergrößern:
Wenn Sie über den mit "Source" beschrifteten Button in die Source-Code-Ansicht schalten, stehen Ihnen keine weiteren Funktionalitäten des RTE zur Verfügung bis Sie mit dem gleichen Button zurückschalten.

Andere Elemente einfügen

TYPO3, dessen Extensions und das Unidesign stellen Ihnen viele Inhaltselemente wie etwa Teaser zur Verfügung. Diese fügen Sie nicht über den Rich-Text-Editor ein. Stattdessen steht Ihnen der RTE oftmals innerhalb dieser Elemente zur Verfüung um den Inhalt zu formatieren. Übersichten der verfügbaren Elemente finden Sie hier:

Kontakt
Bei Fragen und für eine individuelle Beratung wenden Sie sich bitte an TYPO3-Master.
Bei Fragen speziell zu unserem Angebot UniTy3, verwenden Sie bitte dieses Kontaktformular: UniTy3-Support.