TYPO3 (Teil 13): Texte mit dem Rich-Text-Editor schreiben

Das Wichtigste an einer Webseite sind nach wie vor die Texte. (Wobei hier natürlich die Ausnahme die Regel bestätigt). Für die Gestaltung der Texte gibt es in TYPO3 mit htmlArea einen erstklassigen WYSIWYG-Editor. Mit dem lassen sich Texte ganz einfach formatieren, so wie man das von klassischen Textverarbeitungsprogrammen her gewohnt ist.

Wir empfehlen:
TYPO3 CMS-Training

Um den in TYPO3 installierten Editor überhaupt nutzen zu können, sollte man einen vergleichsweise aktuellen Browser verwenden. In der Dokumentation des Editors werden die folgenden Browser-Versionen genannt:

• Firefox 1.5+
• Google Chrome 1.0+
• Internet Explorer 6.0+
• Opera 9.62+
• Safari 3.0.4+
• SeaMonkey 1.0+

TYPO3 verwendet als Editor den htmlArea RTE. Der Rich Text Editor (RTE) arbeitet nach dem WYSIWYG-Prinzip "What you see is what you get" (wörtlich übersetzt "Was du siehst, ist, was du bekommst"). Man kann also direkt während des Arbeitens sehen, wie das Ergebnis aussehen wird. Diese Funktionsweise kennt ihr beispielsweise von Word.

Die Arbeit mit dem Editor ist denkbar einfach. Will man eine Textpassage formatieren, markiert man diese und klickt anschließend auf das gewünschte Symbol im Editor.

 

Die Formatierungssymbole sind weitestgehend selbst erklärend und müssen daher an dieser Stelle nicht einzeln erläutert werden. Sollte dennoch mal die Bedeutung eines Symbols unklar sein, zeigt man darauf mit dem Mauszeiger. In einem Tool-Tipp-Fenster ist daraufhin eine Beschreibung der Funktion zu sehen.

 

Üblicherweise arbeitet man mit der WYSIWYG-Oberfläche. Alternativ dazu kann man aber den sogenannten Textmodus verwenden. Interessant ist das beispielsweise für all diejenigen, die in den Text direkt per HTML eingreifen wollen. Aktiviert werden kann dieser Modus über die Schaltfläche Textmodus umschalten. Daraufhin ist anstelle des WYSIWYG-Editors ein einfaches Textfeld zu sehen.

 

Um wieder in die normale Ansicht zu gelangen, verwendet man dieselbe Schaltfläche erneut. Ein etwas fader Beigeschmack bleibt freilich, wenn man in den Textmodus wechselt. Tatsächlich sind zwar sämtliche Schaltflächen im Editor deaktiviert, sie werden aber dennoch angezeigt.

Braucht man die Schaltflächen nicht, empfiehlt es sich, den Editor gleich ganz zu deaktivieren. Dazu aktiviert man unterhalb des Editorfensters die Option Rich-Text-Editor deaktivieren. TYPO3 zeigt daraufhin noch einmal einen Warnhinweis an. Bestätigt man diesen, ist der Rich-Text-Editor tatsächlich verschwunden.

 

Tastenkombinationen verwenden

Um den Editor effizient zu bedienen, kann man auf Tastenkombinationen zurückgreifen. Die folgende Tabelle stellt die wichtigsten Tastenkombinationen vor. Es müssen auf eurem System allerdings nicht alle dieser Kombinationen verfügbar sein. Letztendlich kommt es nämlich darauf an, ob die betreffenden Schaltflächen freigegeben sind.

Funktion
Tastenkombination

Überschrift 1 (h2)

Strg+1

Überschrift 2 (h2)

Strg+2

Überschrift 3 (h3)

Strg+3

Überschrift 4 (h4)

Strg+4

Überschrift 5 (h5)

Strg+5

Überschrift 6 (h6)

Strg+6

Alles auswählen

Strg+A

Fette Schrift

Strg+B

Auswahl kopieren

Strg+C

Inhalt zentriert ausrichten

Strg+E

Inhalt im Blocksatz darstellen

Strg+J

Inhalt linksbündig ausrichten

Strg+L

Inhalt als Absatz markieren

Strg+N

Inhalt rechtsbündig ausrichten

Strg+R

Durchgestrichener Text

Strg+S

Unterstrichener Text

Strg+U

Den Inhalt, der in der Zwischenablage liegt, einfügen.

Strg+V

Inhalt ausschneiden

Strg+X

Die letzte Aktion wiederholen

Strg+Y

Die letzte Aktion wieder rückgängig machen

Strg+Z
 

Den Editor konfigurieren

Der Editor lässt sich fast nach Belieben anpassen. Dafür gibt es verschiedene Möglichkeiten. So ist – wie eigentlich immer in TYPO3 – der Einsatz von TypoScript denkbar. An dieser Stelle soll zunächst jedoch ein anderer Weg vorgestellt werden. Um den Editor zu konfigurieren, ruft man Adminwerkzeuge>Erweiterungsmanager auf. Sucht im Register Erweiterungen verwalten nach dem Eintrag htmlArea RTE und klickt dort auf Configure.

 

Entscheidend ist zunächst das obere Auswahlfeld.

Denn hierüber kann man ganz grundsätzlich die Funktionsweise des Editors bestimmen. Angeboten werden insgesamt drei verschiedene Stufen, die jeweils einen unterschiedlichen Funktionsumfang aufweisen.

 

Die geringste Funktionsvielfalt bietet dabei Minimal.

Hier hat man tatsächlich nur sehr wenige Schaltflächen im Editor zur Verfügung. So kann man Inhalte zwar kursiv und fett gestalten, viel mehr ist allerdings nicht möglich. Ausschließlich das Einfügen von Bildern ist in diesem Modus noch über eine entsprechende Schaltfläche möglich. Tatsächlich wird dieser Modus verwendet, wenn man Redakteuren möglichst wenig Gestaltungsspielraum für die Formatierung der Texte geben will.

 

Einige Optionen mehr stehen zur Verfügung, wenn man im Auswahlfeld den Eintrag Typical einstellt.

Typical wird in der Praxis am häufigsten eingesetzt. Hier stehen ausreichend Funktionen zur Verfügung, ohne dass die Übersichtlichkeit verloren geht.

 

Wer hingegen tatsächlich den vollen Funktionsumfang nutzen möchte, greift zur Variante Demo.

In diesem Modus gibt es zahlreiche Schaltflächen und Funktionen. Was also spricht gegen diesen Modus? Der beim Speichern des Inhaltselements erzeugte HTML-Code wird in diesem Modus fast nicht überprüft. Daher könnte hier auch sehr schlechter HTML-Code generiert werden, was sich beispielsweise negativ auf die Bewertung der Seite durch Suchmaschinen auswirken kann.

 

Weitere Einstellungen vornehmen

Man kann nicht nur den Modus des Editors einstellen. Vielmehr werden auch noch zahlreiche andere Optionen angeboten.

So ist die Option Enable images in the RTE im Zusammenhang mit dem Einfügen von Bildern in Inhaltselementen über den Editor interessant. Üblicherweise bietet TYPO3 für das Einfügen von Bildern die beiden Inhaltstypen Text und Bilder und Nur Bilder an.

Aktiviert man die Option Enable images in the RTE, steht im RTE (aber nur in den beiden Modi Typical und Minimal( eine Schaltfläche zur Verfügung, über die sich Bilder einfügen lassen. (Bei Demo gibt es die Schaltfläche ohnehin).

 

Klickt man diese Schaltfläche an, öffnet sich der Dialog zum Einfügen von Grafiken. Interessant ist auch die Option Enable additional inline elements. Denn mit der lässt sich die Übersichtlichkeit im RTE erhöhen. Hier zunächst ein Blick auf die Standardansicht.

 

Und jetzt bei aktivierter Option:

Aktiviert man diese Option, werden im Editor Elemente wie fett, kursiv usw. anfangs deaktiviert. Erst wenn im Editorfenster ein Text markiert wird, stehen die Schaltflächen aktiv zur Verfügung.

Interessant ist auch die Option Enable links accessibility icons. Aktiviert man diese, stellt TYPO3 Hyperlinks automatisch eine Grafik voran. Welches Icon verwendet wird, hängt vom Verweisziel ab. Ein Link auf eine E-Mail-Adresse besitzt ein anderes Icon als einer auf eine externe Webseite.

Nachdem die Änderungen gespeichert wurden, stehen sie im Editor dann auch tatsächlich zur Verfügung. Sollten die vorgenommenen Einstellungen nicht sichtbar sein, muss zunächst der Cache geleert werden.

Wir empfehlen:
Dreamweaver-Video-Training

Unsere Empfehlung für dich

TYPO3 CMS-Training

TYPO3 CMS-Training

Du willst deine eigene Website erstellen und administrieren?

  • 8 Stunden Video-Trainings zum beliebten TYPO3 CMS 6
  • 36 Praxis-Lektionen in Text/Bild als PDF (über 400 Seiten)
  • Themeerstellung mit TypoScript
  • Blog, Forum, Multidomainfähigkeit, Mehrsprachigkeit, Benutzerverwaltung & Co.

Fazit: Deine eigene moderne Website mit anspruchsvollen Features kann kommen!

Zum Training