Das Dokument beschreibt die Vor- und Nachteile verschiedener WYSIWYG-Editoren für Drupal, wie CKEditor, FCKEditor und TinyMCE, und hebt die Wichtigkeit von sauberem HTML und Benutzerfreundlichkeit hervor. Es bietet zudem alternative Editoroptionen und diskutiert Anforderungen an die Editorenauswahl sowie Herausforderungen beim Import von Inhalten aus Word. Abschließend wird der HTML Purifier als nützliches Tool zur Bereinigung von Markup empfohlene.

1. WYSIWYG-Editoren
DRUPALCITY
Berlin, 18. September 2011

2. KLEINKRAM
Dies sind die Folien der Session vom DrupalCamp Berlin 2011 – mit ein
paar zusätzlichen Infos, damit ihr in etwa wisst, worum es geht.
Ausführlicher wird es um WYSIWYG-Editoren in etwa
3-4 Wochen in einer Artikelserie auf http://nicolaischwarz.de
gehen (wenn ich dazu komme).

3. ZUR PERSON
Nicolai Schwarz, Design & Webentwicklung
textformer mediendesign, www.textformer.de, Dortmund

4. WERBUNG
»Drupal 7: Das Praxisbuch für Ein- und Umsteiger«
Galileo Computing
469 Seiten – 34,90 Euro
Ab dem 28. September im Handel

6. ALTERNATIVEN
Ich verwende WYSIWYG-Editoren, weil Kunden danach
verlangen. Semantisch erziele ich aber bessere Ergebnisse mit
Markup-Sprachen wie Textile.
In einem WYSIWYG-Editor werden Zwischenüberschriften mal falsch
als gefetteter Absatz oder Listen als Absätze mit Spiegelstrich am
Anfang angelegt.
Mit Textile werden viel eher die richtigen Formate <h3> und <ul><li>
genutzt.

10. DIE ZIELGRUPPE
Leute, die keine Ahnung von Semantik oder Webstandards haben,
aber etwas sehen wollen, das wie Word aussieht.

11. DIE KANDIDATEN
Im Grunde beschränkt es sich in der Praxis auf die Schwergewichte:
CKEditor, dessen Vorgänger FCKEditor und TinyMCE.
Das WYSIWYG-Modul erlaubt aber sieben weitere Editoren, die in
bestimmten Fällen in Frage kommen können: YUI editor, WYMeditor,
Whizzywig, jWysiwyg, markItUp, openWYSIWYG und NicEdit.
Außerdem lohnt es sich, einige andere Editoren im Auge zu behalten,
die es derzeit noch nicht für Drupal gibt: Aloha, Mercury.

24. ANFORDERUNGEN
Im Folgenden liste ich meine Anforderungen an einen WYSIWYG-
Editor auf. Wer programmieren (und Editoren schnell anpassen) kann
oder weniger Wert auf Webstandards legt, kommt vermutlich zu
anderen Anforderungen.

25. EINFACH ZU INSTALLIEREN

26. EINFACH ZU INSTALLIEREN
Drei Möglichkeiten
* Modul WYSIWYG
* Einzelmodul (CKEditor)
* selbst für die Anbindung sorgen

27. EINFACH ZU INSTALLIEREN
Fertige Module.

29. EINFACH ZU INSTALLIEREN
Fertige Module.
SAUBERES HTML
Erzeugt HTML nach Webstandards.

32. EINFACH ZU INSTALLIEREN
Fertige Module.
SAUBERES HTML
Erzeugt HTML nach Webstandards.
NÖTIGE FUNKTIONEN
Fett. Kursiv. Listen. Links. Bilder. Überschriften. Quelltext.

33. EINFACH ZU INSTALLIEREN
Fertige Module.
SAUBERES HTML
Erzeugt HTML nach Webstandards.
NÖTIGE FUNKTIONEN
Fett. Kursiv. Listen. Links. Bilder. Überschriften. Quelltext.
WEITERE FUNKTIONEN
Tabellen? Blockquote? Linien? Sonderzeichen? Plugins!

34. EINFACH ZU INSTALLIEREN
Fertige Module.
SAUBERES HTML
Erzeugt HTML nach Webstandards.
NÖTIGE FUNKTIONEN
Fett. Kursiv. Listen. Links. Bilder. Überschriften. Quelltext.
WEITERE FUNKTIONEN
Tabellen? Blockquote? Linien? Sonderzeichen? Plugins!
UND SONST
Hübsches Design? Deutsche Texte? Konfigurierbare Dialoge?

35. MODUL WYSIWYG
Das WYSIWYG-Modul für Drupal erlaubt es, zehn Editoren ein-
zubinden. Die Vorteile sind, dass sich der Admin nur an die eine
Benutzeroberfläche gewöhnen muss und sich einige Zusatz-Module
wie Autosave direkt an dieses Modul hängen. Als Nachteil stehen
über das WYSIWYG-Modul nicht immer alle Funktionen zur
Verfügung, die der Editor selbst vielleicht bietet.

43. DIE OPTIONEN
Je nach gewähltem Editor zeigt das WYSIWYG-Modul verschiedene
Optionen unter »Schaltflächen und Plugins« an.

78. ZWISCHENSTAND
CKEditor: Der Platzhirsch (wird aktuell in den Foren am häufigsten empfohlen)
FCKEditor: Wird nicht mehr gepflegt, aber immer noch im Rennen
TinyMCE: viele Funktionen, aktuell aber nicht nutzbar (Dh ich bekomme ihn unter Drupal 7
nicht zum Laufen. Andere Leute haben keine Probleme damit.)
YUI Editor: OK, aber im Vergleich zu den Großen zu wenig Funktionen
WYMEditor: Zeigt automatisch die HTML-Blöcke, übersichtliche Dialoge
openWYSIWYG: funktioniert nicht mit Chrome
jWysiwyg: keine Möglichkeit zur Konfiguration; aber basiert auf jQuery
markitup: In der Version zu wenig Funktionen; nicht mal Listen
Whizzywig: Hässlich, aber charmant wegen der Funktionen im Markup-Modus
NicEdit: Letztes Update im Januar 2009

79. DETAILS, DETAILS
Wenn TinyMCE nicht läuft, und der CKEditor die Weiterentwicklung des FCKEditors ist,
werden die meisten Leute den CKEditor auswählen. Ich bin einer der wenigen, die das
bisher nicht machen, aus einem bestimmten Grund: Wenn im CKEditor Bilder eingebaut
werden, gibt der Editor wichtige Informationen als Inline-Style an. Also etwa
style=”margin-left: 10px; margin-right: 10px; float: left; width: 120px; height: 168px;”
statt die Attribute »width« und »height« wie gewohnt und üblich zu benutzen. Nun sind
Inline-Styles im Sinne von Webstandards verpöhnt, außerdem sind im Textformat
»Filtered HTML« keine Inline-Styles erlaubt. Da ich mit dem FCKEditor auch alles machen
kann, was ich brauche, wähle ich bisher noch diesen.
Sobald allerdings das Media-Modul für Drupal 7 einsatzbereit ist, lassen sich Bilder über
einen anderen Button einbinden, über den zwar auch keine »width« und »height« ins
Spiel kommen (was sinnvoll wäre), der zumindest aber keine Inline-Styles erzeugt.

83. Medienverwaltung
In Drupal 7 gibt es für die Medienverwaltung zwei Möglichkeiten: IMCE oder das neue
Media-Modul. Diese funktionieren mit den drei großen Editoren: CKEditor, FCKEditor und
TinyMCE. Bei allen anderen Editoren muss man prüfen, ob die Medienverwaltung dort
auch genutzt werden kann – oder ob sie eigene Optionen für den Upload mitbringen.

86. DIALOGE
Ein Kritikpunkt im Sinne der Usability sind in einigen Editoren die Dialoge für Links und
Bilder. In vielen Fällen sind diese nämlich viel zu umfangreich und können Benutzer
überfordern. Leider sind die Dialoge erst einmal nicht konfigurierbar. Auch mit CSS ist da
nicht viel zu machen. Im FCKEditor sind die Dialoge zum Beispiel als Tabellen aufgebaut.
Einzelne Elemente lassen sich nicht direkt mit CSS ansprechen.
Speziell für Bilder ist aber der Dialog durch den Button fürs Media-Modul viel
benutzerfreundlicher.
Und zumindest bei internen Links können die Module »Linkit« oder »CKEditor Link« die
Dialoge vereinfachen.

90. CODE FORMATIEREN
Innerhalb des WYSIWYG-Moduls ist die Checkbox »Quellcodeformatierung anwenden«
(siehe Seite 41) hilfreich, weil dadurch die HTML-Elemente strukturiert ausgegeben
werden.

93. HTML KORRIGIEREN
Die Funktionen des Drupal-Core oder der Editoren, um Quellcode zu korrigieren, sind zwar
hilfreich, aber nur bis zu einem gewissen Grad. In manchen Fällen werden leere Absätze
erzeugt <p>&nbsp;</p>, andere falsche Konstrukte können nicht aufgelöst werden. Viel
bessere Ergebnisse liefert der HTML Purifier (siehe Seite 107), der sich leicht als Drupal-Filter
installieren lässt.

97. IMPORT AUS WORD
Das größte Problem in WYSIWYG-Editoren ist immer der Import aus Word. Durch
Copy&Paste werden Formate übernommen, die wir im Netz nicht gebrauchen
können und die im Zweifel das Design zerstören. Der Button »Aus MS-Word importieren«
ist da äußerst nützlich, den müssen die Redakteure dann aber auch benutzen. Hier ist
die Checkbox »Bereinigung beim standardmäßigen Einfügen erzwingen« (siehe Seite 41)
sinnvoll, die einen solchen bereinigten Import erzwingt, auch wenn ein Redakteur den
Button nicht benutzt. Nach dem Import kann man auch einmal den Button »Formate
löschen« anklicken, der aber auch wieder aktiv genutzt werden muss.
Wir müssen aber damit rechnen, dass weiterhin unnötige Formatierungen übernommen
werden. Diese werden zwar in der Datenbank gespeichert, lassen sich aber in der
Ausgabe durch den HTML Purifier unterdrücken.

107. HTML PURIFIER
Der »HTML Purifier« bereinigt das Markup äußerst umfangreich. Wir können hiermit zum
Beispiel nur bestimmte HTML-Elemente und -Attribute durchlassen und leere HTML-
Elemente löschen.
Als Alternativen stehen auch die Module »WYSIWYG-Filter« und »HTMLawed« zur
Verfügung.

112. LINKS
http://nicolaischwarz.de
Drupalcamp Essen 2012
http://dce12.drupaletics.de