typo3-handbuch.net
typo3-handbuch.net

RTE – Rich Text Editor in TYPO3

Die Funktionsweise des Rich Text Editors lehnt sich stark an die bekannter Editoren wie Microsoft® Word oder OpenOffice Writer an. Er ist daher für den Benutzer leicht und intuitiv bedienbar. Der RTE verfügt – wie auch die übrigen Icons – über eine sensitive Hilfe (Tool-Tip), mittels derer Informationen zu jedem Icon bereitgestellt werden:

Abb.: TYPO3: Rich Text Editor (RTE)
Abb.: TYPO3: Rich Text Editor (RTE)

Wie viele Formatierungsoptionen bereitstehen, hängt davon ab, welche Module (bzw. Buttons) vom Administrator frei geschaltet wurden. Es können mehr, aber auch weniger Module bereitstehen. Mit dem RTE lassen sich Texte formatieren und Bilder, Verlinkungen oder Tabellen einfügen.

Um Formatierungen auf ein Wort oder einen Textabschnitt anzuwenden, ist der gewünschte Textbereich – anlog zum Vorgehen in Word – zu markieren und im Anschluss auf das entsprechende Icon zu klicken.

Wichtiger Hinweis: Text lässt sich per Copy&Paste mittels der Tastenkürzel STRG+C (kopieren) und STRG+V (einfügen) bequem aus einem Editor wie Microsoft® Word in den RTE kopieren - inklusive aller Formatierungen. Was auf den ersten Blick praktisch zu sein scheint und mit wenig Arbeit verbunden ist, hat seine Tücken, denn dabei werden auch spezifische Word-Formatierungsinformationen übernommen, so dass der Text nicht mehr dem vom Webdesigner definierten einheitlichen Layout entspricht (z.B. die Verwendung einer bestimmten Schriftart und Schriftgröße, etc.).

Die HTML-Ansicht veranschaulicht das Problem:

   So sieht der formatierte Text im Word aus:
   Dieser Satz hat fetten Text und kursiven Text.

Dieser Text wird von Word direkt in den RTE kopiert. In der HTML-Ansicht des RTE zeigt sich folgender Code:

<span style="font-size: 10pt; line-height: 115%; font-family: &quot;Verdana&quot;,&quot;sans-serif&quot;;">Dieser Satz hat <strong>fetten Text</strong>und <em>kursiven Text.</em></span><strong><span style="line-height: 115%;"><br /></span></strong><span style="line-height: 115%;"></span>

Wie vorstehender HTML-Code zeigt, werden dem Text zusätzliche Informationen mitgegeben. Die Schriftgröße (font-size) soll 10pt betragen, der Zeilenabstand (line-height) 115% und als Schriftart (font-family) soll Verdana zum Einsatz kommen, da der Text in Word mit diesen Formatierungen erstellt wurde.

Wurde vom Webdesigner für die Website einheitlich die Schrift Arial in Schriftgröße 12 definiert, so würde sich der neu aus Word in die Webseite integrierte Text also völlig anders darstellen als der übrige Inhaltstext. Selbst wenn die Website die gleiche Schriftart und Schriftgröße verwendet wie die Word-Textvorlage, ist es dennoch problematisch, wenn solche festen Formatierungen in den Text übernommen werden, da die Flexibilität verloren geht, den Text der Website später über wenige Änderungen im zentralen CSS einheitlich in einer anderen Schriftart und Schriftgröße darstellen zu können.

Ausweg: Die Formatierungen lassen sich mit Hilfe des Moduls Formatierungen entfernen eliminieren oder der Text wird von vornherein unformatiert in das RTE Textfeld eingefügt. Weitere Informationen werden unter Formatierungen entfernen bereitgestellt.

Kurzübersicht über die wichtigsten Icons des Rich Text Editors - RTE:

 Fett/Bold

 Kursiv/Italic

 Unterstrichen/Underlined

 horizontale Linie einfügen

 Linksbündig

 Zentriert

 Rechtsbündig

 Nummerierung (nummerierte Liste)

Aufzählung (Liste mit Aufzählungspunkten)

 Einfügen von Sonderzeichen

 Link einfügen

 Tabelle einfügen

 Bild einfügen

 (falsche) Formatierungen im markierten Bereich entfernen

 Suchen und ersetzen

 Textmodus umschalten

 Formatierung entfernen

 Letzte Aktion rückgängig machen

 Letzte Aktion wiederholen

Informationen zum Editor (Copyright, Entwickler)

 

Die meisten der vorgenannten Formatierungsmöglichkeiten sind selbsterklärend, so dass nachfolgend nur einige ausgewählte Funktionen sowie Formatierungen über Blockstile und Textstile näher betrachtet werden.

BLÄTTERN INNERHALB DER AKTUELLEN RUBRIK

  • VORHERIGE SEITE
  • NÄCHSTE SEITE
 
Feedback zur TYPO3 Webagentur und Webdesign, Köln