typo3-handbuch.net
typo3-handbuch.net

Rich Text Editor (RTE): Blockformate, Blockstile und Textstile

Neben diversen Textformatierungsoptionen, welche über die entsprechenden Icons angewandt werden, verfügt der Rich Text Editor über weitere Text-Formatierungsmöglichkeiten:

Abb.: TYPO3 RTE: Blockstile, Textstile und Blockformate
Abb.: TYPO3 RTE: Blockstile, Textstile und Blockformate

RTE: Blockformate bzw. Absatzformate

Über das vorbezeichnete Feld Kein Blockformat aus vorstehender Abbildung kann ein im RTE markiertes Wort bzw. ein markierter Textabschnitt standardgemäß auf folgende Arten formatiert werden:

Abb.: TYPO3 RTE: Blockformat auswählen
Abb.: TYPO3 RTE: Blockformat auswählen

Ob alle vorgenannten Formatierungsoptionen zur Verfügung stehen ist davon abhängig, wie der RTE vom Administrator konfiguriert wurde. Wird der Mauszeiger gemäß vorstehender Abbildung über die Auswahlpunkte geführt, so erscheint ein Tool-Tipp – beispielsweise div bei Behälter oder p bei Absatz. Dies ist das entsprechende HTML-TAG, mit dem der markierte Textabschnitt „gewrapped“, d.h. eingeschlossen wird. Beispielsweise so:

<p>Dies ist ein Textabsatz</p>

Weitere Informationen über das Zusammenspiel zwischen RTE und HTML werden unter Textmodus Umschalten  bereitgestellt.

  • Blockformat entfernen: sofern ein Text bereits mit einem Blockformat formatiert wurde, lässt es sich mit dieser Option wieder entfernen.
  • Absatz: Absätze verfügen – je nachdem wie das CSS vom Webdesigner definiert wurde – über mehr oder weniger große Abstände oberhalb und unterhalb des Absatzes zum umgebenden Flusstext.
  • Behälter: Inhaltsbereiche wie Texte aber auch Medien (Bilder, etc.) lassen sich mit Blockformaten wie beispielsweise den so genannten DIV-Containern wrappen – z.B.:

         <div>Dies ist ein Container</div>

    Den DIV-Tags lassen sich CSS-Stylesheet-Definitionen mitgeben, beispielsweise:
    <div class=“roter-text“>roter Text</div>

    Alle gewrappten Textbereiche, wie Behälter oder Absätze, können zusätzliche Eigenschaften erhalten. Nachdem der Textbereich mit einem solchen Format versehen wurde, kann unter Blockstile eine CSS-Klasse ausgewählt werden und dem Textblock damit ein individuelles Erscheinungsbild, z.B. eine Farbe, Textgröße oder Ausrichtung gegeben werden. Weitere Informationen dazu werden nachfolgend unter Blockstile bereitgestellt.
  • Zitat: ermöglicht es, einen Text optisch als Zitat darzustellen.
  • Überschrift 1-6: damit lassen sich H1, H2, H3,…,H6-Überschriften erstellen. Insbesondere H1, H2 und H3-Überschriften spielen unter anderem auch eine wichtige Rolle bei der Suchmaschinenoptimierung.

    Ob die mittels Blockformat-Einstellung vorgenommenen Textformatierungen im RTE genauso angezeigt werden wie im Frontend auf der Website, hängt davon ab, ob der Administrator den RTE entsprechend individuell eingerichtet hat. Unabhängig vom Erscheinungsbild im RTE werden die Formatierungen auf der Website aber stets über das globale CSS gesteuert und präsentieren sich einheitlich.

RTE: Blockstile

Damit Blockstile angewandt werden können, muss ein Textabschnitt im RTE-Editorenfeld zunächst mit einem Blockformat versehen worden sein, denn nur durch HTML-TAGs umgebene („gewrappte“) Textbereiche können mit zusätzlichen CSS-Klassen versehen werden.

Beispiel: Wie zuvor beschrieben wird ein Textabschnitt über die Option Blockformate als Absatz definiert:

<p>Dies ist ein Absatz</p>

Einem dergestalt gewrappten Text lässt sich eine zusätzliche CSS-Klasse „mitgeben“:

<p class=“c66r“>Dies ist ein Absatz</p>

Die Klasse c66r bezeichnet auf der Referenz-Website der „Schmidt & Partner Wirtschaftsberater“ einen Abstand von 66% vom rechten Rand. Wird eine entsprechende Formatierung des Absatzes mit dieser Klasse vorgenommen, ergibt sich:

Abb.: TYPO3 RTE: Blockstil anwenden
Abb.: TYPO3 RTE: Blockstil anwenden

Welche Blockstile bereitstehen, ist abhängig davon, ob und wie sie vom Administrator erstellt wurden. Sollte sich die Funktionsweise eines bestimmten Stils nicht unmittelbar erschließen, kann beispielsweise das Inhaltselement auf einer anderen Seite geprüft werden, wo die gewünschte Textformatierung bereits besteht.

Tipp:
Es ist darauf zu achten, auf denselben Textbereich nicht mehrere Blockstile anzuwenden – es sei denn, dies ist gewollt und beabsichtigt. Werden in vorstehendem Beispiel noch zusätzlich die Klassen c33r und c20r (Randabstand 33% bzw. 20% vom rechten Rand) angewendet, so ändert sich optisch im RTE nichts. Tatsächlich werden die entsprechenden Klassen ergänzt, wie aus der HTML-Ansicht (aktivierbar über das Icon ) ersichtlich wird:

<p class="c66r c33r c20r">Text befindet sich 66% vom rechten Rand</p>

Damit werden sozusagen mehrere Klassen „hintereinander geschaltet“ mit für den Redakteur unvorhersehbaren Folgen. Um dies zu vermeiden, stellt das Auswahlfeld Blockstil die Option Blockstil entfernen bereit, die vor Anwendung eines neuen Blockstils genutzt werden sollte.

RTE: Textstile

Textstile funktionieren grundsätzlich genauso wie Blockstile. Die begriffliche Abgrenzung erfolgt, weil manche HTML-TAGs so genannte Blockformate und andere TAGs Textformate darstellen. Blockformate sind beispielsweise die bereits erwähnten TAGs <div> oder <p>. Textformate hingegen sind beispielsweise fetter oder kursiver Text. Somit lässt sich für in einem Textformat gewrappten Text ebenfalls eine CSS-Klasse definieren, beispielsweise:

<b class=“roter-text“>Roter und fetter Text</b>

Das Textformat <b>fett</b> erzeugt einen Text in fetter Schrift, während die Klasse roter-text (sofern entsprechendes CSS definiert wurde) den Text zusätzlich – nomen est omen – mit roter Farbe versieht.

BLÄTTERN INNERHALB DER AKTUELLEN RUBRIK

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