WYSIWYG-Editoren (für Drupal 7)

112
WYSIWYG-Editoren DRUPALCITY Berlin, 18. September 2011

description

Folien meiner Session über WYSIWYG-Editoren für Drupal 7 auf dem DrupalCamp Berlin 2011. Möglicherweise gibt es dazu in ein paar Wochen eine Artikelserie auf http://nicolaischwarz.de.

Transcript of WYSIWYG-Editoren (für Drupal 7)

Page 1: WYSIWYG-Editoren (für Drupal 7)

WYSIWYG-Editoren

DRUPALCITY Berlin, 18. September 2011

Page 2: WYSIWYG-Editoren (für Drupal 7)

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).

KLEINKRAM

Page 3: WYSIWYG-Editoren (für Drupal 7)

ZUR PERSONNicolai Schwarz, Design & Webentwicklungtextformer mediendesign, www.textformer.de, Dortmund

Page 4: WYSIWYG-Editoren (für Drupal 7)

WERBUNG

»Drupal 7: Das Praxisbuch für Ein- und Umsteiger«Galileo Computing

469 Seiten – 34,90 EuroAb dem 28. September im Handel

Page 5: WYSIWYG-Editoren (für Drupal 7)
Page 6: WYSIWYG-Editoren (für Drupal 7)

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.

Page 7: WYSIWYG-Editoren (für Drupal 7)
Page 8: WYSIWYG-Editoren (für Drupal 7)
Page 9: WYSIWYG-Editoren (für Drupal 7)
Page 10: WYSIWYG-Editoren (für Drupal 7)

Leute, die keine Ahnung von Semantik oder Webstandards haben,

aber etwas sehen wollen, das wie Word aussieht.

DIE ZIELGRUPPE

Page 11: WYSIWYG-Editoren (für Drupal 7)

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.

Page 12: WYSIWYG-Editoren (für Drupal 7)
Page 13: WYSIWYG-Editoren (für Drupal 7)
Page 14: WYSIWYG-Editoren (für Drupal 7)
Page 15: WYSIWYG-Editoren (für Drupal 7)
Page 16: WYSIWYG-Editoren (für Drupal 7)
Page 17: WYSIWYG-Editoren (für Drupal 7)
Page 18: WYSIWYG-Editoren (für Drupal 7)
Page 19: WYSIWYG-Editoren (für Drupal 7)
Page 20: WYSIWYG-Editoren (für Drupal 7)
Page 21: WYSIWYG-Editoren (für Drupal 7)
Page 22: WYSIWYG-Editoren (für Drupal 7)
Page 23: WYSIWYG-Editoren (für Drupal 7)
Page 24: WYSIWYG-Editoren (für Drupal 7)

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.

Page 25: WYSIWYG-Editoren (für Drupal 7)

EINFACH ZU INSTALLIEREN

Page 26: WYSIWYG-Editoren (für Drupal 7)

EINFACH ZU INSTALLIEREN

Drei Möglichkeiten

* Modul WYSIWYG* Einzelmodul (CKEditor)* selbst für die Anbindung sorgen

Page 27: WYSIWYG-Editoren (für Drupal 7)

EINFACH ZU INSTALLIEREN Fertige Module.

Page 28: WYSIWYG-Editoren (für Drupal 7)
Page 29: WYSIWYG-Editoren (für Drupal 7)

EINFACH ZU INSTALLIEREN Fertige Module.

SAUBERES HTML Erzeugt HTML nach Webstandards.

Page 30: WYSIWYG-Editoren (für Drupal 7)
Page 31: WYSIWYG-Editoren (für Drupal 7)
Page 32: WYSIWYG-Editoren (für Drupal 7)

EINFACH ZU INSTALLIEREN Fertige Module.

SAUBERES HTML Erzeugt HTML nach Webstandards.

NÖTIGE FUNKTIONEN Fett. Kursiv. Listen. Links. Bilder. Überschriften. Quelltext.

Page 33: WYSIWYG-Editoren (für Drupal 7)

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!

Page 34: WYSIWYG-Editoren (für Drupal 7)

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?

Page 35: WYSIWYG-Editoren (für Drupal 7)

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.

Page 36: WYSIWYG-Editoren (für Drupal 7)
Page 37: WYSIWYG-Editoren (für Drupal 7)
Page 38: WYSIWYG-Editoren (für Drupal 7)
Page 39: WYSIWYG-Editoren (für Drupal 7)
Page 40: WYSIWYG-Editoren (für Drupal 7)
Page 41: WYSIWYG-Editoren (für Drupal 7)
Page 42: WYSIWYG-Editoren (für Drupal 7)
Page 43: WYSIWYG-Editoren (für Drupal 7)

DIE OPTIONEN

Je nach gewähltem Editor zeigt das WYSIWYG-Modul verschiedene

Optionen unter »Schaltflächen und Plugins« an.

Page 44: WYSIWYG-Editoren (für Drupal 7)
Page 45: WYSIWYG-Editoren (für Drupal 7)
Page 46: WYSIWYG-Editoren (für Drupal 7)
Page 47: WYSIWYG-Editoren (für Drupal 7)
Page 48: WYSIWYG-Editoren (für Drupal 7)
Page 49: WYSIWYG-Editoren (für Drupal 7)
Page 50: WYSIWYG-Editoren (für Drupal 7)
Page 51: WYSIWYG-Editoren (für Drupal 7)
Page 52: WYSIWYG-Editoren (für Drupal 7)
Page 53: WYSIWYG-Editoren (für Drupal 7)
Page 54: WYSIWYG-Editoren (für Drupal 7)
Page 55: WYSIWYG-Editoren (für Drupal 7)
Page 56: WYSIWYG-Editoren (für Drupal 7)
Page 57: WYSIWYG-Editoren (für Drupal 7)
Page 58: WYSIWYG-Editoren (für Drupal 7)
Page 59: WYSIWYG-Editoren (für Drupal 7)
Page 60: WYSIWYG-Editoren (für Drupal 7)
Page 61: WYSIWYG-Editoren (für Drupal 7)
Page 62: WYSIWYG-Editoren (für Drupal 7)
Page 63: WYSIWYG-Editoren (für Drupal 7)
Page 64: WYSIWYG-Editoren (für Drupal 7)
Page 65: WYSIWYG-Editoren (für Drupal 7)
Page 66: WYSIWYG-Editoren (für Drupal 7)
Page 67: WYSIWYG-Editoren (für Drupal 7)
Page 68: WYSIWYG-Editoren (für Drupal 7)
Page 69: WYSIWYG-Editoren (für Drupal 7)
Page 70: WYSIWYG-Editoren (für Drupal 7)
Page 71: WYSIWYG-Editoren (für Drupal 7)
Page 72: WYSIWYG-Editoren (für Drupal 7)
Page 73: WYSIWYG-Editoren (für Drupal 7)
Page 74: WYSIWYG-Editoren (für Drupal 7)
Page 75: WYSIWYG-Editoren (für Drupal 7)
Page 76: WYSIWYG-Editoren (für Drupal 7)
Page 77: WYSIWYG-Editoren (für Drupal 7)
Page 78: WYSIWYG-Editoren (für Drupal 7)

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

ZWISCHENSTAND

Page 79: WYSIWYG-Editoren (für Drupal 7)

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.

DETAILS, DETAILS

Page 80: WYSIWYG-Editoren (für Drupal 7)
Page 81: WYSIWYG-Editoren (für Drupal 7)
Page 82: WYSIWYG-Editoren (für Drupal 7)
Page 83: WYSIWYG-Editoren (für Drupal 7)

MedienverwaltungIn 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.

Page 84: WYSIWYG-Editoren (für Drupal 7)
Page 85: WYSIWYG-Editoren (für Drupal 7)
Page 86: WYSIWYG-Editoren (für Drupal 7)

DIALOGEEin 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.

Page 87: WYSIWYG-Editoren (für Drupal 7)
Page 88: WYSIWYG-Editoren (für Drupal 7)
Page 89: WYSIWYG-Editoren (für Drupal 7)
Page 90: WYSIWYG-Editoren (für Drupal 7)

CODE FORMATIERENInnerhalb des WYSIWYG-Moduls ist die Checkbox »Quellcodeformatierung anwenden«

(siehe Seite 41) hilfreich, weil dadurch die HTML-Elemente strukturiert ausgegeben

werden.

Page 91: WYSIWYG-Editoren (für Drupal 7)
Page 92: WYSIWYG-Editoren (für Drupal 7)
Page 93: WYSIWYG-Editoren (für Drupal 7)

HTML KORRIGIERENDie 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.

Page 94: WYSIWYG-Editoren (für Drupal 7)
Page 95: WYSIWYG-Editoren (für Drupal 7)
Page 96: WYSIWYG-Editoren (für Drupal 7)
Page 97: WYSIWYG-Editoren (für Drupal 7)

IMPORT AUS WORDDas 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.

Page 98: WYSIWYG-Editoren (für Drupal 7)
Page 99: WYSIWYG-Editoren (für Drupal 7)
Page 100: WYSIWYG-Editoren (für Drupal 7)
Page 101: WYSIWYG-Editoren (für Drupal 7)
Page 102: WYSIWYG-Editoren (für Drupal 7)
Page 103: WYSIWYG-Editoren (für Drupal 7)
Page 104: WYSIWYG-Editoren (für Drupal 7)
Page 105: WYSIWYG-Editoren (für Drupal 7)
Page 106: WYSIWYG-Editoren (für Drupal 7)
Page 107: WYSIWYG-Editoren (für Drupal 7)

HTML PURIFIERDer »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.

Page 108: WYSIWYG-Editoren (für Drupal 7)
Page 109: WYSIWYG-Editoren (für Drupal 7)
Page 110: WYSIWYG-Editoren (für Drupal 7)
Page 111: WYSIWYG-Editoren (für Drupal 7)
Page 112: WYSIWYG-Editoren (für Drupal 7)

LINKShttp://nicolaischwarz.de

Drupalcamp Essen 2012 http://dce12.drupaletics.de