Wer ein Content Management System betreibt, sucht sehr bald für sich und seine Anwender nach einer Möglichkeit, Texte mit Hilfe eines Wysiwyg-Editors (What You See Is What You Get) zu erstellen. Mit einem solchen Editor lassen sich Texte "per Knopfdruck" über eine Button-Leiste formatieren und der Texteditor zeigt während des Editierens den Text weitgehend schon so an, wie er ausgegeben werden soll.
Es gibt verschiedene Wysiwyg-Editoren, die über das Wysiwyg-Modul von Drupal eingebunden werden können. Im folgenden wird die Installation von TinyMCE über das Wysiwyg-Modul von Drupal beschrieben, die für Anfänger leider nicht immer problemlos zu bewerkstelligen ist.
Vor allem existieren im Internet eine Vielzahl sehr unterschiedlicher Anleitungen, die teilweise die Installation anderer Drupal-Module voraussetzen, z.B. für die Einbindung von Medien. Auf letzteres soll hier zunächst verzichtet werden um die Installation so Narrensicher wie möglich zu machen. In einem weiteren Artikel werden gegebenenfalls weitere Hinweise für eine sinnvolle Konfiguration gegeben.
Ein Problem der Installation von TinyMCE in Drupal ist die Konfusion, die durch nicht kompatible Versionen des Drupal Moduls "Wysiwyg", der Javascript Library "TinyMCE" selbst und "jQuery" entstehen kann. Ich werde deshalb auf Versionen verweisen, die zueinander kompatibel sind. Dies sind:
- Drupal 7.26
- Drupal Modul Wysiwyg 7.x-2.2
- TinyMCE Version 3.5.8 und
- jQuery Version 1.7.1
Wer zum ersten Mal ein solches System aufsetzt, sollte entweder zunächst versuchen, diese Versionen zu verwenden oder, wenn das nicht mehr möglich ist, sich auf zusätzliche Probleme gefasst machen, die daraus resultieren. Wichtig ist vor allem die richtige TinyMCE Version in Kombination mit der von Drupal verwendeten jQuery Version. Das Drupal Modul selbst darf ruhig aktueller sein. Vorsicht ist angebracht bei Verwendung des Drupal Moduls jQuery-Update. Eventuell kann dieses Module aber auch zur Problemlösung eingesetzt werden, indem dort verschiedene jQuery-Versionen eingestellt bzw. ausprobiert werden.
Installation von TinyMCE über das Wysiwyg-Modul von Drupal
Hier wird der Weg beschrieben, der bei mir mit einer frischen Drupal-Installation funktionierte:
- Das Modul Wysiwyg installieren.
- Eine geeignete TinyMCE-Version herunterladen und im Ordner "sites/all/libraries/tinymce/" speichern.
- Dabei darauf man achten, dass die richtige Ordner-Struktur eingehalten wird. Unterhalb des Ordners "tinymce" sollte sich der Ordner "jscripts" befinden, sonst wird TinyMCE vom Wysiwyg-Modul nicht erkannt. Bei mir befindet sich im Ordner "jscripts" dann der Ordner "tiny_mce" der dann die Javascripte, z.B. "tiny_mce.js" enthält. Letzteres mag sich für die verschiedenen TinyMCE-Versionen unterscheiden, aber als Anhaltspunkt hier nochmal der komplette Pfad bis herunter zu einem Javascript: "sites/all/libraries/tinymce/jscripts/tiny_mce/tiny_mce.js".
- Als nächstes gehe ich in die Konfiguration des Wysiwyg-Moduls: "/admin/config/content/wysiwyg". Dort finde ich unter "Installation Instructions" dann hoffentlich meinen TinyMCE-Editor, der mit einer Versionsnummer (z.B. 3.5.8) als "installed" gekennzeichnet ist. Man findet dort auch Installationshinweise für andere Wysiwyg-Editoren und einen Download-Link, falls man seine TinyMCE-Version updaten möchten. Auf der Download-Seite findet man verschiedene Versionen, die man bei Versionskonflikten z.B. mit jQuery ebenfalls ausprobieren kann. Ich verwende aber im Moment nur die 3.x-Versionen.
- Im Auswahlformular auf der gleichen Seite oben wähle ich nun z.B. für den Format-Typ "Full HTML" den TinyMCE-Editor aus (s. Abb. 1) und speichere das Formular.
Abb. 1: Konfiguration des Wysiwyg-Moduls
Wenn ich jetzt einen Inhalt, z.B. einen Artikel, bearbeiten oder neu anlegen möchte ("/node/add/article"), wird mir bei Auswahl des Formats "Full HTML" der TinyMCE-Editor angeboten, allerdings noch ohne Buttons.
Um für mich geeignete Buttons auszuwählen gehe ich nochmal in die Wysiwyg-Konfiguration ("/admin/config/content/wysiwyg"). Dort befindet sich jetzt neben der Auswahl "TinyMCE 3.5.8" noch ein "Edit"- und ein "Delete"-Link.
Klicke ich auf den Edit-Link, dann werden mir auf der Folgemaske alle Einstellmöglichkeiten meines Tiny-MCE-Editors angeboten.
Unter "Buttons and Plugins" kann ich mir dort die Buttons (z.B. "Bold", "Italic", ...) und sonstigen Features zusammenstellen, die ich für eine sichere und komfortable Texteingabe benötige.