Anzeige
Anzeige
UX & Design
Artikel merken

Extension integriert TinyMCE in das CMS: Ein neuer Rich-Text-Editor für TYPO3

Nahezu jedes CMS besitzt einen Rich-Text-Editor (RTE), der Redaktueren die tägliche Arbeit mit Inhalten erleichtert. Der auf JavaScript basierende Open-Source-RTE TinyMCE zählt zu den leistungsfähisten seiner Art und ist in zahlreichen Open-Source-Projekten zu finden. Die neue Extension „tinymce_rte“ integriert den Editor in TYPO3 und bietet zahlreiche Vorteile gegenüber dem Standard-RTE.

4 Min. Lesezeit
Anzeige
Anzeige

TYPO3 hat mit der Änderung des Backend-Layouts ab Version 4.2 eine deutliche Verbesserung der Usability erreicht. Der standardmäßig installierte Rich-Text-Editor (RTE) HTMLArea ist allerdings nicht mehr State of the Art und wird seit einiger Zeit nicht mehr eigenständig weiterentwickelt. So entstand im September 2008 die Motivation zur Integration eines aktuellen und leistungsfähigen RTEs in Form einer Extension.

TinyMCE

Anzeige
Anzeige

Bei der Evaluation zahlreicher JavaScript-basierter WYSIWYG-Editoren stellte sich TinyMCE als klarer Sieger heraus. Positive Faktoren waren vor allem die große Community und Verbreitung des Open-Source-Projekts. Darüber hinaus konnte der RTE mit einer konsistenten API und guter Dokumentation punkten. Insgesamt wurde deutlich, dass das Projekt großen Wert auf eine einfache Integrationsmöglichkeit in Content Management Systeme und andere Web-Software legt.

Nachdem feststand, dass TinyMCE die technologische Basis der neuen RTE-Extension „tinymce_rte“ [1] bilden wird, ging es an die Umsetzung. Oberste Maxime dabei: Die Konfiguration der Extension soll der von TinyMCE möglichst ähnlich sein. Dies hat den Vorteil, dass Fragen, die nur TinyMCE betreffen, von der großen TinyMCE-Community beantwortet werden können. Die Extension selbst konfiguriert ein Admin in TYPO3 an einer zentralen Stelle: in der PageTSconfig. So werden sich gegenseitig überschreibende Konfigurationen verhindert.

Anzeige
Anzeige

tinymce_rte besitzt eine Standardkonfiguration für TYPO3-Transformationen, in der sämtliche TinyMCE-Features aktiviert sind. Das erleichtert Redakteuren die Arbeit mit dem Editor, der Administrator muss die Extension lediglich installieren und sich nicht mit der Konfiguration auseinandersetzen, bevor die Redakteure loslegen können.

Anzeige
Anzeige

Einfache Konfiguration

Konfigurationen, die tinymce_rte betreffen, werden in der PageTSconfig getätigt und können von der UserTSconfig überschrieben werden. Es gibt zwei Arten von Konfigurationen – die TYPO3-spezifische (RTE.default.) und die TinyMCE-spezifische (RTE.default.init.). Meistens wird man folgendes benötigen:

Allgemeine Einstellungen
RTE.default.init {
	content_css = fileadmin/templates/main/css/screen.css
	theme_advanced_buttons1 = bold,italic,underline,|,bullist,numlist [...]

Listing 1

So geben Sie die CSS-Datei an, die der RTE verwenden soll und definieren die Buttons, die er dem Redakteur anzeigen soll. Eine komplette Liste aller verfügbaren Konfigurationen finden Sie im TinyMCE-Wiki [2]. Sämtliche Optionen können Sie im Abschnitt „RTE.default.init“ setzen und müssen dabei lediglich den Doppelpunkt durch ein Gleichheitszeichen austauschen.

Anzeige
Anzeige

Erweiterte Konfiguration

tinymce_rte hat einige Basiskonfigurationen an Bord, die Sie im Extension-Manager auswählen und anschließend beliebig anpassen können. Um zu gewährleisten, dass Konfigurationen unabhängig von der Auswahl im Extension-Manager sein können, gibt es die Möglichkeit, die Extension-Manager-Auswahl zu überschreiben.

Definition der Standardeinstellung
RTE.default {
	loadConfig = EXT:tinymce_rte/static/standard.ts
	init { 
...

Listing 2

So erreichen Sie, dass Sie sämtliche Einstellungen in der Datei „standard.ts“ vornehmen können, egal welche Auswahl im Extension-Manager getroffen wurde. Dies ist von Vorteil, wenn Sie Ihre Einstellungen in eine externe Datei auslagern wollen, um sie beispielsweise in mehreren TYPO3-Installationen zu verwenden.

Multilingual

TinyMCE unterstützt rund 50 Sprachen und hat einen hervorragenden Sprach-Service, über den Entwickler bestehende Sprachen modifizieren und neue Sprachen ergänzen können. Standardmäßig beherrscht tinymce_rte Englisch und Deutsch. Wer mehr benötigt, braucht lediglich die Extension „tinymce_languages“ [3] zu installieren, die alle verfügbaren Sprachen enthält.

Anzeige
Anzeige
typo3filemanager – ein TinyMCE-Plugin
Das Plugin ermöglicht Redakteuren, Links und Bilder mit nur zwei
Klicks einzubinden, da es den Page-/File-Browser sofort darstellt. Nötig sind gesonderte Sprachdateien, die nicht im TinyMCE-Sprachservice enthalten sind, aber in der Extension „tinymce_languages“ im Ordner „tiny_mce/plugins/typo3filemanager/langs/“.

Features, Features, Features

tinymce_rte besitzt eine „native“ Linkhandler-Unterstützung, mit der Redakteure Links zu beliebigen Datenbankeinträgen erstellen können. Der RTE zeigt dazu keinen weiteren Tab, statt dessen treffen Redakteure ihre Auswahl wie bei Content-Elementen von Seiten. In der Regel genügt es also, den entsprechenden Sysfolder auszuwählen und darin die gewünschten Einträge zu selektieren. Beispiele dazu finden sich auf der Projektseite im TYPO3-Forge [4].

Administratoren können verschiedene Konfigurationen für Tabellen, Spalten und TemplaVoila-Felder angeben, dies sogar abhängig von der jeweiligen Sprache. So lässt sich etwa der RTE für die linke Spalte anders als der für die rechte konfigurieren. tinymce_rte verfügt zudem über einen fortschrittlichen Ladealgorithmus, der den JavaScript-Code von TinyMCE nur einmal pro Backend-Session übertragen muss.

TinyMCE bietet darüber hinaus ein hervorragendes Template-System, mit dem es möglich ist, einfachen HTML-Code einzufügen oder bestimmte Marker mit statischem Text zu ersetzen. Dieses Template-System kann seinen vollen Umfang jedoch erst durch die nahtlose Integration in TYPO3 ausspielen. So kann TYPO3 dynamische Inhalte einfach generieren, die dann vom Redakteur als statischer Inhalt platziert werden.

Anzeige
Anzeige

Die Einbindung von tinymce_rte in ein Frontend-Plugin funktioniert prinzipiell genauso wie bei HTMLArea. Zuerst müssen Sie die Datei inkludieren, um anschließend eine Instanz davon zu erzeugen. Mit der Funktion „drawRTE“ bekommen Sie schließlich den HTML-Code für den RTE.

PHP-Code für Verwendung in einem FE-Plugin
require_once(t3lib_extMgm::extPath('tinymce_rte').'pi1/class.tx_tinymce_rte_pi1.php');
$this->RTEObj = t3lib_div::makeInstance('tx_tinymce_rte_pi1');
$RTEItem = $this->RTEObj->drawRTE($this, $table, $field, $row, $PA, $specConf, $thisConfig,   
	$RTEtypeVal, '', $thePidValue);

Listing 3

Fazit

TinyMCE ist ein leistungsfähiger Rich-Text-Editor mit großer Entwickler- und Anwender-Gemeinde. Davon profitieren nicht nur die Entwickler von tinymce_rte, sondern vor allem die Anwender. Sie erhalten einen zukunftsfähigen Editor, der sich nahtlos in TYPO3 integriert und an zentraler Stelle konfiguriert werden kann.

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
Schreib den ersten Kommentar!
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige