• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
WYSIWYG-Editoren (für Drupal 7)
 

WYSIWYG-Editoren (für Drupal 7)

on

  • 6,884 views

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.

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.

Statistics

Views

Total Views
6,884
Views on SlideShare
6,700
Embed Views
184

Actions

Likes
1
Downloads
10
Comments
0

5 Embeds 184

http://nicolaischwarz.de 155
http://paper.li 14
http://www.nicolaischwarz.de 10
http://drupalcamp-essen.de 4
http://nicolaischwarz.de. 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • WYSIWYG-EditorenDRUPALCITYBerlin, 18. September 2011
    • KLEINKRAMDies sind die Folien der Session vom DrupalCamp Berlin 2011 – mit einpaar zusätzlichen Infos, damit ihr in etwa wisst, worum es geht.Ausführlicher wird es um WYSIWYG-Editoren in etwa3-4 Wochen in einer Artikelserie auf http://nicolaischwarz.degehen (wenn ich dazu komme).
    • ZUR PERSON Nicolai Schwarz, Design & Webentwicklung textformer mediendesign, www.textformer.de, Dortmund
    • WERBUNG »Drupal 7: Das Praxisbuch für Ein- und Umsteiger« Galileo Computing 469 Seiten – 34,90 Euro Ab dem 28. September im Handel
    • ALTERNATIVENIch verwende WYSIWYG-Editoren, weil Kunden danachverlangen. Semantisch erziele ich aber bessere Ergebnisse mitMarkup-Sprachen wie Textile.In einem WYSIWYG-Editor werden Zwischenüberschriften mal falschals gefetteter Absatz oder Listen als Absätze mit Spiegelstrich amAnfang angelegt.Mit Textile werden viel eher die richtigen Formate <h3> und <ul><li>genutzt.
    • DIE ZIELGRUPPELeute, die keine Ahnung von Semantik oder Webstandards haben,aber etwas sehen wollen, das wie Word aussieht.
    • DIE KANDIDATENIm 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 inbestimmten 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.
    • ANFORDERUNGENIm Folgenden liste ich meine Anforderungen an einen WYSIWYG-Editor auf. Wer programmieren (und Editoren schnell anpassen) kannoder weniger Wert auf Webstandards legt, kommt vermutlich zuanderen Anforderungen.
    • EINFACH ZU INSTALLIEREN
    • EINFACH ZU INSTALLIERENDrei Möglichkeiten* Modul WYSIWYG* Einzelmodul (CKEditor)* selbst für die Anbindung sorgen
    • EINFACH ZU INSTALLIERENFertige Module.
    • EINFACH ZU INSTALLIERENFertige Module.SAUBERES HTMLErzeugt HTML nach Webstandards.
    • EINFACH ZU INSTALLIERENFertige Module.SAUBERES HTMLErzeugt HTML nach Webstandards.NÖTIGE FUNKTIONENFett. Kursiv. Listen. Links. Bilder. Überschriften. Quelltext.
    • EINFACH ZU INSTALLIERENFertige Module.SAUBERES HTMLErzeugt HTML nach Webstandards.NÖTIGE FUNKTIONENFett. Kursiv. Listen. Links. Bilder. Überschriften. Quelltext.WEITERE FUNKTIONENTabellen? Blockquote? Linien? Sonderzeichen? Plugins!
    • EINFACH ZU INSTALLIERENFertige Module.SAUBERES HTMLErzeugt HTML nach Webstandards.NÖTIGE FUNKTIONENFett. Kursiv. Listen. Links. Bilder. Überschriften. Quelltext.WEITERE FUNKTIONENTabellen? Blockquote? Linien? Sonderzeichen? Plugins!UND SONSTHübsches Design? Deutsche Texte? Konfigurierbare Dialoge?
    • MODUL WYSIWYGDas WYSIWYG-Modul für Drupal erlaubt es, zehn Editoren ein-zubinden. Die Vorteile sind, dass sich der Admin nur an die eineBenutzeroberfläche gewöhnen muss und sich einige Zusatz-Modulewie Autosave direkt an dieses Modul hängen. Als Nachteil stehenüber das WYSIWYG-Modul nicht immer alle Funktionen zurVerfügung, die der Editor selbst vielleicht bietet.
    • DIE OPTIONENJe nach gewähltem Editor zeigt das WYSIWYG-Modul verschiedeneOptionen unter »Schaltflächen und Plugins« an.
    • ZWISCHENSTANDCKEditor: Der Platzhirsch (wird aktuell in den Foren am häufigsten empfohlen)FCKEditor: Wird nicht mehr gepflegt, aber immer noch im RennenTinyMCE: 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 FunktionenWYMEditor: Zeigt automatisch die HTML-Blöcke, übersichtliche DialogeopenWYSIWYG: funktioniert nicht mit ChromejWysiwyg: keine Möglichkeit zur Konfiguration; aber basiert auf jQuerymarkitup: In der Version zu wenig Funktionen; nicht mal ListenWhizzywig: Hässlich, aber charmant wegen der Funktionen im Markup-ModusNicEdit: Letztes Update im Januar 2009
    • DETAILS, DETAILSWenn 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 dasbisher nicht machen, aus einem bestimmten Grund: Wenn im CKEditor Bilder eingebautwerden, gibt der Editor wichtige Informationen als Inline-Style an. Also etwastyle=”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 sindInline-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 machenkann, was ich brauche, wähle ich bisher noch diesen.Sobald allerdings das Media-Modul für Drupal 7 einsatzbereit ist, lassen sich Bilder übereinen anderen Button einbinden, über den zwar auch keine »width« und »height« insSpiel kommen (was sinnvoll wäre), der zumindest aber keine Inline-Styles erzeugt.
    • MedienverwaltungIn Drupal 7 gibt es für die Medienverwaltung zwei Möglichkeiten: IMCE oder das neueMedia-Modul. Diese funktionieren mit den drei großen Editoren: CKEditor, FCKEditor undTinyMCE. Bei allen anderen Editoren muss man prüfen, ob die Medienverwaltung dortauch genutzt werden kann – oder ob sie eigene Optionen für den Upload mitbringen.
    • DIALOGEEin Kritikpunkt im Sinne der Usability sind in einigen Editoren die Dialoge für Links undBilder. 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 danicht 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 vielbenutzerfreundlicher.Und zumindest bei internen Links können die Module »Linkit« oder »CKEditor Link« dieDialoge vereinfachen.
    • CODE FORMATIERENInnerhalb des WYSIWYG-Moduls ist die Checkbox »Quellcodeformatierung anwenden«(siehe Seite 41) hilfreich, weil dadurch die HTML-Elemente strukturiert ausgegebenwerden.
    • HTML KORRIGIERENDie Funktionen des Drupal-Core oder der Editoren, um Quellcode zu korrigieren, sind zwarhilfreich, aber nur bis zu einem gewissen Grad. In manchen Fällen werden leere Absätzeerzeugt <p>&nbsp;</p>, andere falsche Konstrukte können nicht aufgelöst werden. Vielbessere Ergebnisse liefert der HTML Purifier (siehe Seite 107), der sich leicht als Drupal-Filterinstallieren lässt.
    • IMPORT AUS WORDDas größte Problem in WYSIWYG-Editoren ist immer der Import aus Word. DurchCopy&Paste werden Formate übernommen, die wir im Netz nicht gebrauchenkö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 istdie Checkbox »Bereinigung beim standardmäßigen Einfügen erzwingen« (siehe Seite 41)sinnvoll, die einen solchen bereinigten Import erzwingt, auch wenn ein Redakteur denButton nicht benutzt. Nach dem Import kann man auch einmal den Button »Formatelöschen« anklicken, der aber auch wieder aktiv genutzt werden muss.Wir müssen aber damit rechnen, dass weiterhin unnötige Formatierungen übernommenwerden. Diese werden zwar in der Datenbank gespeichert, lassen sich aber in derAusgabe durch den HTML Purifier unterdrücken.
    • HTML PURIFIERDer »HTML Purifier« bereinigt das Markup äußerst umfangreich. Wir können hiermit zumBeispiel nur bestimmte HTML-Elemente und -Attribute durchlassen und leere HTML-Elemente löschen.Als Alternativen stehen auch die Module »WYSIWYG-Filter« und »HTMLawed« zurVerfügung.
    • LINKShttp://nicolaischwarz.deDrupalcamp Essen 2012http://dce12.drupaletics.de