Der TinyMCE als TYPO3 RTE

Was ist der „tinymce4_rte”?

TinyMCE steht für Tiny Moxiecode Content Editor und ist ein WYSIWIG-Editor für Webanwendungen, der auf JavaScript basiert. Die Erweiterung „tinymce” bindet diesen in TYPO3 ein und bietet eine API für die Nutzung an. Der „tinymce4_rte” wiederum bindet den Editor darüber als RTE in TYPO3 ein. Er enthält wie der ähnlich lautende "tinymce_rte" zusätzliche Plugins für Links und Bilder, aber sonst haben diese nicht viel gemein.

Installation / Integration

Öffnen Sie das TYPO3-Backend und klicken Sie auf der linken Seite auf „Erweiterungsmanager" im Abschnitt „Adminwerkzeuge”.

Über der Funktion „Erweiterungen hinzufügen” können Sie „Jetzt aktualisieren” klicken, um Ihre Paketliste zu aktualisieren. Danach geben Sie „tinymce4” in die Suche ein und klicken auf den Button unter "Aktionen", um den „tinymce4_rte” hinzuzufügen. Bedenken Sie, dass Sie ebenfalls die Erweiterung tinymce installiert haben müssen. Die Installation dieser Abhängigkeit findet bei der Installation jedoch üblicherweise automatisch statt.

Anschließend müssen Sie nun noch den standardmäßigen Editor "rtehtmlarea" in Ihrer Installation entfernen, da sich die Erweiterungen sonst gegenseitig in die Quere kommen würden. Dies geschieht ähnlich wie bereits bei der Installation von tinymce4_rte.

Was kann der „tinymce4_rte”?

Im Nachfolgenden listen wir einige wichtige Funktionen auf, welche entweder vom tinyMCE selbst bereitgestellt werden oder von uns für den RTE entwickelt worden sind.

Editor statt HTML-Code

In dieser Textbox auf unserer Beispiel-Webseite steht folgender Text:

Hallo Leute, normalerweise sieht das so aus!”

So sah die Textbox ohne einen RTE aus.

Nach der Aktivierung im Extension Manager sieht die Textbox nun so aus (ist doch gleich viel leichter zu lesen, oder?).

Wie Sie sehen, müssen Sie keinen umständlichen HTML-Code nutzen, stattdessen können Sie Ihre Texte ähnlich wie in Microsoft Word verfassen.

Den zugehörigen HTML-Code ausgeben

Interne Links, Dateien, Ordner, Externe Links und E-Mail-Adressen einfügen

Wenn Sie in Ihrer Textbox ein Wort markieren und unter dem Drop-Down-Menu „Einfügen” auf „Link einfügen” klicken, erhalten Sie das Fenster aus Abbildung 6. Dieses Plugin wurde von uns entwickelt und basiert auf dem Plugin des Editors "rtehtmlarea".
Um interne Seiten zu verlinken, klicken Sie auf den Reiter„Page” und wählen dort aus dem Seitenbaum die Seite aus, die Sie verlinken wollen.

Wenn Sie Dateien verlinken wollen, können Sie dies über den Reiter „Datei” erledigen. Hier können Sie entweder Dateien hochladen oder aus dem Verzeichnisbaum wählen.

Unter dem Reiter „Ordner” können Sie Ordner verlinken. Legen Sie einen neuen Ordner an oder wählen Sie einen Ordner aus dem Verzeichnisbaum.

Wählen Sie den Reiter „External URL”, um einen externen Link einzufügen. Dort geben Sie Ihren Link ein. Was bei Title steht sehen Sie, wenn Sie mit der Maus über dem Link verweilen.

Damit Ihre E-Mail-Adresse verlinkt wird, müssen Sie im Reiter „Email” Ihre Adresse eingeben.

Bilder einfügen

Auch dieses Plugin wurde von uns für den tinyMCE entwickelt und besteht wieder zum Großteil aus Code vom rtehtmlarea. Es ermöglicht Ihnen, Bilder in den Text einzufügen. Sie können eigene Bilder hochladen oder aus Beispielbildern wählen.

Konfiguration

Es gibt 4 Arten der Konfiguration:

  • Konfiguration des TinyMCE
  • Konfiguration des Link- und Bild-Plugins
  • Bereitstellung einer Content-CSS-Datei
  • RTE-Konfiguration von TYPO3

Konfiguration des TinyMCE

Zunächst kopieren Sie die „standard.js” in den Ordner „fileadmin” oder einem anderen Ihrer Wahl. Benennen Sie diese nun nach Ihren Wünschen um oder behalten Sie den Namen bei. Anschließend öffnen Sie im Seitenbaum die gewünschte Seite - üblicherweise die Startseite - und klicken über der Überschrift auf „Seiteneigenschaften bearbeiten”
(Abbildung 13). Gehen Sie auf den Reiter „Ressourcen” und geben Sie den nachfolgenden Code bei „Seiten-TSconfig” ein:

RTE.default {
  tinymceConfiguration = fileadmin/standard.js
}

Alle Änderungen - wie z.B. das Hinzufügen oder das Löschen von Plugins - müssen Sie in der kopierten Datei durchführen, da die „standard.js” der Erweiterung bei jedem Update überschrieben wird und Ihre Änderungen somit gelöscht werden würden.
Um die Auswahldialoge des Link- und Bild-Plugins zu konfigurieren, können Sie die standardmäßige Konfiguration des rtehtmlarea nutzen, da die Funktionalität von hier stammt.

Beispielsweise können Sie mit nachfolgender Konfigurationseinstellung die Möglichkeit entfernen, "Magic Images" hinzufügen zu können. Es gibt jedoch noch weitaus mehr Optionen.

RTE.default.buttons.image.options.removeItems = magic

Wenn Sie Abbildung 16 und Abbildung 11 vergleichen, werden Sie feststellen, dass der Menüpunkt „Magic Image” nicht mehr zur Auswahl steht.

Sie können auch Ihr Content-CSS konfigurieren, indem Sie in Ihrer Seiten-TSConfig folgende Konfiguration mit Ihrem Pfad zur CSS-Datei angeben:

RTE.default.contentCSS = fileadmin/Test.css

RTE-Konfiguration von TYPO3

Zu guter Letzt gibt es noch die Konfiguration der Textverarbeitung von TYPO3, d.h. wie TYPO3 diese im Frontend tatsächlich darstellt. Mit folgender Konfiguration können Sie beispielsweise einstellen, dass nur noch folgende Tags angezeigt werden: „div,p,span”. Weitere Optionen finden Sie in der Core-API-Referenz von TYPO3.

Videoanleitung

Falls Ihnen diese Anleitung zu langweilig ist, gibt es das ganze auch als Video ;-)