Drupal 6 - Installieren der WYSIWYG API inkl. Editoren

Installieren der WYSIWYG API zum Integrieren eines (oderer mehrerer) Editors/Editoren in Drupal 6

Es wird empfohlen, die WYSIWYG API anstelle der einzelnen Editor-Module zu verwenden. Erstens ist man mit dem Modul flexibler und zweitens wird die API aktiver weiterentwickelt als die Editor-Module.
In bestimmten Fällen kann die Verwendung der Editor-Module anstelle der API jedoch sinnvoll sein. Dazu kann man leider keine allgemein gültige Aussage treffen, man muss sich darüber im Klaren sein, ob man die API oder ein Editor-Modul verwenden will.

Die WYSIWYG API unterstützt in Version 2.1 folgende Editoren:

• MarkItUp
• YUI Editor
• CKEditor
• jWYSIWYG
• TinyMCE
• FCKeditor
• openWYSIWYG
• NicEdit
• WYMeditor
• Whizzywig

Dieses Tutorial verwendet folgende Modul- bzw. Software-Versionen:

Drupal --> 6.17
WYSIWYG --> 6.x - 2.1
IMCE --> 6.x-2.0-beta3
IMCE-WYSIWYG-Bridge --> 6.x-1.1
WYSIWYG image upload --> 6.x-2.0


Vorbereitung

Zuerst müssen die nötigen Module heruntergeladen werden:

WYSIWYG API - Die Grundvoraussetzung zum Installieren diverser Editoren
IMCE - Dateimanager; wird benötigt, um direkt aus dem Editor Bilder auf den Server hochzuladen und im Editor einzufügen
IMCE-WYSIWYG-Bridge - Verbindung zwischen IMCE und der WYSIWYG API; wird benötigt, um IMCE in die Editoren einzubinden

Außerdem muss auf dem Server ein Verzeichnis erstellt werden: sites/all/libraries
Es muss also neben den Ordnern "modules" und "themes" ein Ordner namens "libraries" unter sites/all angelegt werden

Alternativ zu IMCE + Bridge kann man auch das Modul WYSIWYG image upload verwenden. Dieses Modul ist insofern vorzuziehen, dass es zum einen als stable releast ist (IMCE ist offiziell noch im Beta-Status) und dass es laut Project-Page in jeden Editor der WYSIWYG API integriert werden kann (IMCE + Bridge funktioniert nur bei TinyMCE, FCKEditor und CKEditor).


Installation

Nach dem Download der Module werden diese installiert (also nach sites/all/modules hochgeladen und dann unter admin/build/modules aktiviert).

Nach der Aktivierung sucht man die Einstellungen von WYSIWYG unter admin/settings/wysiwyg auf.
Dort kann man jedem Eingabeformat einen Editor zuweisen. Allerdings müssen dafür zuerst Editoren installiert werden.

Dazu scrollt man unter admin/settings/wysiwyg ein wenig nach unten und findet den Punkt "Installationsanweisungen". Wenn man darauf klickt, öffnet sich ein Kasten, in welchem alle unterstützten Editoren aufgelistet werden.

Wenn ein Editor installiert ist, wird dahinter die installierte Versionsnummer angezeigt, ansonsten steht dort "Nicht installiert".
Außerdem steht unter jedem nicht installierten Editor eine Anweisung, wohin die Daten kopiert werden müssen. Dafür muss man sie natürlich herunterladen. Die Downloadlinks muss man sich aber nicht mühsam zusammensuchen, sondern in der Liste der Editoren ist für jeden Editor ein Downloadlink mit angegeben.

Für die Installation der Editoren hier ein Beispiel. Ich habe als Editor TinyMCE gewählt:

Bei den "Installationsanweisungen" steht bei TinyMCE folgender Text:

Ein Klick auf den Downloadlink führt nach http://tinymce.moxiecode.com/download.php, dort wurde der Editor in Form eines Zip-Archives namens "tinymce_3_3_7.zip" heruntergeladen. Nach dem Entpacken bekommt man einen Ordner "tinymce". Darin enthalten sind die Ordner "examples" und "jscripts" sowie das "changelog.txt".

Als nächstes legt man per FTP in sites/all/libraries den Ordner "tinymce" an und kopiert dort hinein die zwei Ordner und das Changelog.

--> Man kann auch einfach den Ordner, welchen man beim Entpacken erhält, nach sites/all/libraries kopieren. Aber je nachdem, wie man sein Pack-Programm bedient kann sich ein Ordner ergeben, dessen Bezeichnung nicht mit der von WYSIWYG erwarteten Benennung übereinstimmt. Wichtig ist also darauf zu achten, dass man die Ordner-Struktur bei den Installationsanweisungen erhält, welche bei TinyMCE so aussieht:

Man muss also in sites/all/libraries einen Ordner namens "tinymce" haben und direkt darin wird der Ordner "jscripts" erwartet usw. Wenn man also beim entpacken noch einen Überordner erhält (also z.B. tinymce_3_3_7-->tinymce-->jscripts usw.), muss man darauf achten, die Ordner-Struktur einzuhalten, sonst wird der Editor nicht erkannt.

Nachdem man den Editor auf den Server geladen hat, ruft man erneut admin/settings/wysiwyg auf und klickt auf "Installationsanweisungen". Dort steht nun bei TinyMCE, dass die Version 3.3.7 installiert ist.


Editor auswählen

Als letztes muss der Editor noch aktiviert werden. Dazu wählt man beim gewünschten Eingabeformat in der Combobox den gewünschten Editor aus und klickt auf "Speichern". Danach muss man den Editor noch konfigurieren, dazu klickt man hinter dem Editor beim Inhaltstyp auf "Bearbeiten" und gelangt zu den Einstellungen dieses Editors für dieses Eingabeformat. Man kann also den gleichen Editor mit unterschiedlichen Einstellungen bei verschiedenen Eingabeformaten verwenden.

Im Grunde kann man den Editor mit den Standard-Einstellungen vom Fleck weg verwenden. Allerdings sollte man im "Basis-Setup" die Sprache anpassen, wenn man gerne eine deutsche Ausgabe der Tooltips hätte (wenn man für den Editor ein deutsches Sprachpaket hat; für TinyMCE ist dieses separat erhältlich).

Wichtig ist allerdings, dass unter "Schaltflächen und Plugins" standardmäßig keine Schaltflächen aktiviert wurden. Das heißt, ohne Konfiguration kann der Editor noch gar nichts, man muss zuerst die gewünschten Funktionen/Schaltflächen aktivieren. Dazu muss man einfach in der Editor-Konfiguration unter "Schaltflächen und Plugins" die gewünschten Funktionen auswählen und auf "Speichern" klicken.

Dazu zwei Tipps:

• überlegt euch, welche Funktionen ihr benötigt bzw. ihr euren Usern zur Verfügung stellen wollt und aktiviert nur diese. Vor allem TinyMCE hat viele Schaltflächen (73 Stück!), wenn man die alle aktiviert, ist die Übersicht schnell dahin. Viel hilf nicht immer viel und der 08/15-User wird 75% dieser Schaltflächen nicht nutzen, sich aber über das erschlagende Erscheinungsbild ärgern.




• Bei manchen Editoren (allen voran TinyMCE) sind die Beschriftungen hinter einigen Kästchen zum Aktivieren blau --> das sind Links, also vorsichtig. Bei den Kästchen ist es normalerweise so, dass das Kästchen "abgehakt" wird, wenn man auf die Schrift klickt, die lässt sich eben leichter treffen als das kleine Kästchen. Wenn ihr dann aber beim Aktivieren eurer Schaltflächen auf so einen Link klickt, folgt der Browser diesem Link - natürlich ohne vorher zu speichern. Das heißt, alle Auswahlen sind verworfen und ihr dürft nochmal von vorn beginnen, die gewünschten Schaltflächen zu aktivieren.

Die restlichen Einstellungen der Editor-Konfiguration kann man den eigenen Wünschen entsprechend anpassen, aber ab sofort ist der Editor einsatzbereit.

Noch ein paar kleine Tipps:

• Man sollte beachten, den Usern den Zugriff auf das entsprechende Eingabe-Format zu gewähren, wenn sie den Editor benutzen sollen.




• Man sollte nur die Editoren installieren, die man auch verwenden will; es bringt nichts, Editoren zu installieren, die man nie auf der Seite benutzt. Gerade der YUI Editor ist mit 78 MB ein ziemliches Schwergewicht (Vergleich: TinyMCE benötigt 1,7 MB, andere noch weniger) und dieser Speicher wird dann sinnlos in Beschlag genommen. Ein bis drei Editoren, mehr benötigt man meist nicht, meistens nur einen einzigen (der CKEditor ist in letzter Zeit sehr beliebt, ich mag ihn weniger und empfehle eher den TinyMCE)




• Wenn man mit IMCE oder image upload Bilder in einen Text einfügen will, muss man beachten, dass das gewählte Eingabeformat mindestens den HTML-Tag "img" zulässt. Sonst erscheint das Bild zwar im Editor, aber nach dem Speichern ist kein Bild zu sehen. Dazu ist nicht zwingend "Full HTML" nötig (bei dem User evtl. JS einbinden könnten), sondern man kan auch einfach den img-Tag in einem anderen Format zulassen, ggf. noch den div-Tag




• Manche Editoren harmonieren nicht mit einigen Themes (z.B. sieht TinyMCE mit dem Theme "pixture_reloaded" sehr seltsam aus). In solchen Fällen kann man probieren, bei der Editor-Konfiguration unter "CSS" die Option "CSS-Anweisungen des Themes verwenden" auszuwählen




• Man sollte sich immer gut überlegen, ob man einen WYSIWYG-Editor verwenden will. Diese Editoren fügen selbstständig HTML-Tags ein usw. Sowas kann einem bestimmte Formatierungen zerreisen usw. Man sollte das Für und Wider dieser Editoren gut abwägen und ggf. auf einen reinen WYSIWYG-Editor verzichten und einen Editor verwenden, wie er hier im DC verwendet wird: BUEditor

Wenn ihr nun hier angekommen seid, könnt ihr (hoffentlich) euren WYSIWYG-Editor verwenden.
Viel Spaß mit eurem neuen "Spielzeug" =)