TYPO3 Rich Text Editor (RTE) für perfekter Website-Content

Nun, der TYPO3 Rich Text Editor (RTE) ist Ihr guter Freund, denn er ermöglicht es Ihnen, Inhalte zu formatieren, Links hinzuzufügen, Ihre Inhalte mit Listen zu strukturieren und Ordnung zu halten und das alles, ohne auch nur eine einzige Zeile Code zu schreiben. Wenn Sie schon einmal mit Word oder Google Docs gearbeitet haben, werden Sie sich sofort zurechtfinden.

Und das Beste daran ist, dass der RTE in TYPO3 auf einem Framework namens CKEditor basiert. Dieser bleibt modern, flexibel und leistungsstark für die Textformatierung. Administratoren können festlegen, welche Schaltflächen Sie verwenden dürfen, und Sie können sich ganz darauf konzentrieren, gute Inhalte zu schreiben, die auf der Website auch richtig aussehen.

Also, lassen Sie uns die Finger bewegen und bereit machen, mit dem TYPO3 RTE noch einfacher zu bearbeiten.

Tauchen wir ein!

Links gehören zu den häufigsten Elementen, die Sie im TYPO3 RTE hinzufügen. Es ist sehr einfach, Links einzufügen:

• Interne Links: Sie werden über den TYPO3-Link-Browser mit einer anderen Seite Ihrer Website verbunden.
• Externe Links: Sie können vollständige URLs hinzufügen (z. B. https:// example.com
  ). Außerdem können Sie einstellen, ob sich der Link im selben Tab oder in einem neuen öffnet.
• E-Mail-Links: Durch Klicken auf eine E-Mail-Adresse öffnet sich das E-Mail-Programm des Besuchers.
• Anker Links: Sie können zu einem bestimmten Abschnitt derselben Seite springen. Das ist hilfreich, wenn die Seite lang ist und viele Inhalte enthält.

Wenn Sie Links auf diese Weise hinzufügen, stellen Sie sicher, dass sie dem TYPO3 Standard folgen und auf Ihrer Website korrekt funktionieren.

Listen und Tabellen sind hervorragende Möglichkeiten, Inhalte so zu strukturieren, dass Ihr Publikum diese leicht erfassen kann. Der TYPO3 RTE bietet einfache Optionen für beides:

• Listen: Wählen Sie eine Aufzählung oder nummerierte Liste für jede Art von Inhalt, z. B. Schritte, Kernaussagen, Themen usw.
• Tabellen: Tabellen sind ein großartiges Mittel, um strukturierte Daten zu organisieren. Sie können Tabellen anpassen, indem Sie Rahmen ändern, Zeilen und Spalten hinzufügen/entfernen oder Zellen zusammenführen, wenn es sinnvoll ist.
• Stile: Einige TYPO3 Konfigurationen stellen spezielle Stile für Tabellen bereit, z. B. abwechselnd gefärbte Zeilen/Spalten, Gitter mit Rahmen usw. abhängig davon, welche Optionen der Administrator freigeschaltet hat.
• Einschränkungen: Tabellen sind wichtig für die Strukturierung von Inhalten, aber Bilder sollten in der Regel nicht in Tabellen eingefügt werden. Verwenden Sie für Bilder besser dedizierte Inhaltselemente.

Mit diesen Werkzeugen können Sie Ihre Inhalte übersichtlich und strukturiert darstellen ohne unnötige Hürden für Ihr Publikum.

Manchmal benötigen Sie ein Zeichen, das auf Ihrer Tastatur nicht vorhanden ist z. B. ©, ® oder Buchstaben mit Akzenten. Der TYPO3 RTE verfügt über ein integriertes Werkzeug, das Ihnen dabei hilft.

• Öffnen Sie in der Symbolleiste den Punkt „Sonderzeichen einfügen“.
• Wählen Sie das gewünschte Zeichen aus der Liste aus und fügen Sie es in Ihren Text ein.

So müssen Sie keine Symbole mehr aus anderen Quellen kopieren alles ist direkt verfügbar.

Wenn die Schaltfläche Quelltext aktiv ist, kann der TYPO3 RTE auch den zugrunde liegenden HTML-Editor Ihres Inhalts anzeigen. Dies ist besonders in den folgenden Situationen nützlich:

• Wenn die Formatierung merkwürdig aussieht und Sie wissen möchten, welcher Code dies verursacht hat.
• Wenn Sie unerwünschte Tags entfernen müssen, die aus Inhalten stammen, die aus Word oder anderen Editoren eingefügt wurden.
• Wenn Sie überprüfen möchten, ob Ihre Überschriften, Listen und Links korrekt strukturiert sind.

In den meisten Fällen werden Redakteure diese Option nicht oft verwenden. Sie kann jedoch ein hervorragendes Werkzeug sein, um komplexere Formatierungsprobleme zu beheben.

Ob die Schaltfläche verfügbar ist, hängt von der Admin-Konfiguration Ihrer Website ab, da Administratoren diese Optionen ein- oder ausblenden können.

Der Rich-Text-Editor (RTE) in TYPO3 ist äußerst flexibel und basiert auf dem CKEditor. Redakteure konzentrieren sich in der Regel nur auf die Schaltflächen in der Symbolleiste.

Mit dem RTE kann jedoch der Administrator oder Integrator entscheiden, welche Optionen verfügbar sind, wie die HTML Ausgabe reduziert oder bereinigt wird und was formatiert werden darf.

Es gibt mehrere zentrale Stellen für die Konfiguration, die wir im Folgenden vorstellen basierend sowohl auf der veröffentlichten TYPO3 Dokumentation als auch auf den Best Practices von TYPO3 Anwendern.

1. RTE-Voreinstellungen mit YAML

Die RTE-Voreinstellungen in TYPO3 werden über eine YAML Konfigurationsdatei definiert. Diese Presets steuern das Layout, die verfügbaren Schaltflächen und die Funktionsweise des Editors.
Eine einfache Definition könnte folgendermaßen aussehen:

editor:
 config:
   toolbar:
     items:
       - bold
       - italic
       - link
       - bulletedList
       - numberedList

Es ist wichtig zu beachten, dass die YAML-Datei angepasst und eigene Presets erstellt werden können. So könnte beispielsweise ein Nachrichten-Redakteur eine einfacher definierte Symbolleiste benötigen, während jemand anderes in der Organisation eine umfangreichere Symbolleiste benötigt. Ebenso wäre es möglich, einen minimalen RTE zu definieren einen für Nachrichten-Redakteure und einen anderen für fortgeschrittene Redakteure.

2. TSconfig Optionen

Eine weitere Möglichkeit, den RTE anzupassen, besteht neben der Änderung der YAML-Datei in den PageTSconfig-Optionen. Mit TSconfig lässt sich steuern, wie Klassen verwendet werden können, welche Schaltflächen verfügbar sind und wie die Verarbeitung des RTE erfolgt.  

Beispiel: Einschränken, welche Klassen für Tabellen und Links erlaubt sind:

RTE.default.proc.allowedClasses = table-bordered, table-striped

Beispiel: Einen Button „Als reinen Text einfügen“ hinzufügen und aktivieren:

RTE.default.showButtons := addToList(pastetoggle)
RTE.default.buttons.pastetoggle.setActiveOnRteOpen = 1

Diese kleinen Einstellungen tragen dazu bei, dass die Inhalte konsistent mit dem Design der Website bleiben.

3. Steuerung der HTML Ausgabe

TYPO3 verfügt über ein System, bei dem sämtliches im RTE erstelltes HTML mithilfe von entryHTMLparser_db bereinigt wird. Dadurch wird sichergestellt, dass nur gültige (oder erlaubte) Tags und Attribute in der Datenbank gespeichert werden.

Beispiel: Wenn Inline-Styles und Breitenangaben aus Tabellen entfernt werden sollen:

RTE.default.proc.entryHTMLparser_db.tags.table.fixAttrib.style.unset = 1
RTE.default.proc.entryHTMLparser_db.tags.table.fixAttrib.width.unset = 1
RTE.default.proc.entryHTMLparser_db.tags.table.fixAttrib.height.unset = 1

Dies stellt sicher, dass die korrekte Ausgabe im Frontend beibehalten wird und ausschließlich CSS verwendet wird nicht jedoch Inline-Styles für die Darstellung.

4. Eigene CSS-Klassen definieren

Administratoren können die benutzerdefinierten CSS-Klassen aus dem Stylesheet der Website verfügbar machen, sodass Redakteure diese direkt im RTE anwenden können.

RTE.default.contentCSS = fileadmin/css/rte.css

RTE.default.proc.allowedClasses := addToList(error, small, arrowlink)
RTE.classes.error {
 name = Error Highlight
 value = color: #FF0000; font-weight: bold;
}
RTE.classes.small {
 name = Small Text
 value = font-size: 80%;
}

Dies stellt sicher, dass Redakteure nur aus den vom Design vorgegebenen, konformen Stilen auswählen können und nicht eigenständig Schriftarten nach Belieben ändern.

5. Erweiterte Tabellenstile

TYPO3 unterstützt die Definition erweiterter Tabellenklassen, wie zum Beispiel abwechselnd gefärbte Zeilen. Administratoren können Klassen für abwechselnde Zeilen konfigurieren und diese im RTE als auswählbare Optionen bereitstellen:

RTE.classes.stripedtable {
 name = Striped Table
 alternating.rows {
   oddClass = row-odd
   evenClass = row-even
 }
}

Und in

rte.css:
table.stripedtable tr.row-odd { background: #f9f9f9; }
table.stripedtable tr.row-even { background: #fff; }

Dies bietet Redakteuren optisch ansprechende Tabellen und bleibt dennoch im Rahmen der Markenrichtlinien.

6. Sicherheit sowie saubere Inhalte

• Das automatische Verlinken von URLs kann für bestimmte Tags deaktiviert werden; so wird vermieden, dass Links in Codebeispielen als anklickbare Links erscheinen.
• Verwenden Sie die Kopieren/Einfügen-Funktion für Dokumente oder Inhalte aus Word? Bereinigen Sie diese immer mit „Als reinen Text einfügen“!
• Durch das Einschränken verfügbarer Tags und Klassen wird sichergestellt, dass Redakteure keine Layouts beschädigen oder TYPO3 Barrierefreiheit Probleme verursachen können.

7. Beheben von RTE-Problemen

Wenn der RTE im Backend nicht richtig geladen wird:

• Gehe ins TYPO3-Backend, öffne Benutzerprofil → Benutzereinstellungen → Reiter„Konfiguration zurücksetzen“, und klicke auf „Konfiguration zurücksetzen und temporäre Daten löschen“
• Stellen Sie sicher, dass Ihre YAML oder TSconfig Dateien keine Syntaxfehler enthalten.
• Prüfen Sie, ob in der Konfiguration Ihrer Website das richtige Preset zugewiesen ist.

Auch wenn Ihr RTE vollständig funktioniert, können Redakteure dennoch auf Probleme stoßen. So gehen Sie damit um:

• Sauberes Einfügen: Beim Kopieren aus Word oder anderen Websites kann es vorkommen, dass unsichtbare Formatierungen mit übernommen werden. Verwenden Sie Strg + Umschalt + V (oder Cmd + Umschalt + V auf dem Mac), um sauber einzufügen oder nutzen Sie die Schaltfläche „Formatierung entfernen“.
• Zeilenumbruch vs. Absatz: Wenn Sie einen neuen Absatz beginnen möchten, drücken Sie Enter. Möchten Sie nur einen einfachen Zeilenumbruch ohne zusätzlichen Abstand, verwenden Sie Shift + Enter.
• Quelltext-Ansicht: Der RTE verfügt über eine „Quelltext“-Schaltfläche. Wenn Darstellungs- oder Formatierungsfehler auftreten, öffnen Sie die Quelltext-Ansicht und überprüfen Sie den zugrunde liegenden HTML-Code, um das Problem zu beheben.
• Fehlende Symbolleisten-Schaltflächen: Administratoren können bestimmte Schaltflächen je nach Rolle einschränken. Wenn Sie auf ein Icon oder eine Funktion keinen Zugriff haben, wenden Sie sich an den Administrator.
• RTE zurücksetzen: Wenn sich der Editor merkwürdig verhält, können Sie die Konfiguration in TYPO3 zurücksetzen, temporäre Daten löschen oder sich einfach ab- und wieder anmelden.

Wie in diesem Kapitel behandelt, lohnt sich der Einsatz des TYPO3 Rich-Text-Editors (RTE), um sicherzustellen, dass Ihre Inhalte sauber, konsistent und leicht zu verwalten bleiben.

Egal ob beim Kopieren von Einleitungstexten, beim Erstellen interner Links, beim Arbeiten mit Quellcode, beim Definieren von Listen oder beim Hinzufügen von Bildern das Verständnis der Funktionen, die Sie nutzen, hilft, typische Probleme zu vermeiden, mit denen Redakteure regelmäßig konfrontiert sind.

Darüber hinaus macht es einen deutlichen Unterschied, ob Inhalte professionell gestaltet erscheinen. Wenn Sie sich mit der Verwaltung von TYPO3 überfordert fühlen oder die Möglichkeiten des Rich-Text-Editors optimal ausschöpfen möchten, kann die Zusammenarbeit mit einer vertrauenswürdigen TYPO3 Agentur von großem Nutzen sein.

Wir helfen Ihnen, Ihr RTE-Setup zu vereinfachen und zu optimieren, Ihren Workflow effizienter zu gestalten und sicherzustellen, dass Ihre Inhalte beim Veröffentlichen auf Ihrer Website stets zu 100 % sauber aussehen.

Mit der richtigen Unterstützung wird es deutlich einfacher, Ihre Inhalte zu verwalten und TYPO3 erledigt den Rest!