SlideShare ist ein Scribd-Unternehmen logo
WYSIWYG-Editoren




DRUPALCITY
Berlin, 18. September 2011
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).
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
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.
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)
DIE ZIELGRUPPE
Leute, die keine Ahnung von Semantik oder Webstandards haben,
aber etwas sehen wollen, das wie Word aussieht.
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.
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)
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.
EINFACH ZU INSTALLIEREN
EINFACH ZU INSTALLIEREN

Drei Möglichkeiten

* Modul WYSIWYG
* Einzelmodul (CKEditor)
* selbst für die Anbindung sorgen
EINFACH ZU INSTALLIEREN
Fertige Module.
WYSIWYG-Editoren (für Drupal 7)
EINFACH ZU INSTALLIEREN
Fertige Module.


SAUBERES HTML
Erzeugt HTML nach Webstandards.
WYSIWYG-Editoren (für Drupal 7)
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.
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!
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?
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.
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)
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.
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)
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
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.
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)
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.
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)
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.
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)
CODE FORMATIEREN
Innerhalb des WYSIWYG-Moduls ist die Checkbox »Quellcodeformatierung anwenden«
(siehe Seite 41) hilfreich, weil dadurch die HTML-Elemente strukturiert ausgegeben
werden.
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)
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.
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)
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.
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)
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.
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)
LINKS
http://nicolaischwarz.de


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

Weitere ähnliche Inhalte

Andere mochten auch

Search engine-optimization-starter-guide-fr
Search engine-optimization-starter-guide-frSearch engine-optimization-starter-guide-fr
Search engine-optimization-starter-guide-fr
NeoSting
 
Overview TRIRIGA en Français
Overview TRIRIGA en FrançaisOverview TRIRIGA en Français
Overview TRIRIGA en Français
Joseph Gonzalez & Partners
 
CSS
CSSCSS
Apresentacao plansis floripa 2012
Apresentacao plansis floripa 2012Apresentacao plansis floripa 2012
Apresentacao plansis floripa 2012
Flávio Mendes
 
[DE] Information Management & Qualitätsmanagement | Comarch Webinar mit Dr. U...
[DE] Information Management & Qualitätsmanagement | Comarch Webinar mit Dr. U...[DE] Information Management & Qualitätsmanagement | Comarch Webinar mit Dr. U...
[DE] Information Management & Qualitätsmanagement | Comarch Webinar mit Dr. U...
PROJECT CONSULT Unternehmensberatung Dr. Ulrich Kampffmeyer GmbH
 
LotusLive - Social Business
LotusLive - Social BusinessLotusLive - Social Business
LotusLive - Social Business
Cleyton Kano
 
Smarter Commerce Perspective
Smarter Commerce PerspectiveSmarter Commerce Perspective
Smarter Commerce Perspective
Plansis
 
QL teens 4 teens Germany
QL teens 4 teens GermanyQL teens 4 teens Germany
QL teens 4 teens Germany
etwinningbliss
 
Treinamento Acessórios parte 03
Treinamento Acessórios parte 03Treinamento Acessórios parte 03
Treinamento Acessórios parte 03
DremelBrasil
 
MySQL Cluster, o Banco de Dados do jogo nº 1 do Facebook na América Latina
MySQL Cluster, o Banco de Dados do jogo nº 1 do Facebook na América LatinaMySQL Cluster, o Banco de Dados do jogo nº 1 do Facebook na América Latina
MySQL Cluster, o Banco de Dados do jogo nº 1 do Facebook na América Latina
MySQL Brasil
 
Funções Grupo Oracle
Funções Grupo OracleFunções Grupo Oracle
Funções Grupo Oracle
Pablo Garcia
 
“Portal Social como Chave para Inovação e Conhecimento” - Sidney Sossai - IBM
“Portal Social como Chave para Inovação e Conhecimento” - Sidney Sossai - IBM “Portal Social como Chave para Inovação e Conhecimento” - Sidney Sossai - IBM
“Portal Social como Chave para Inovação e Conhecimento” - Sidney Sossai - IBM
Sociedade Brasileira de Gestão do Conhecimento
 
Bounce Rate - Key Performance Indikator, Ralf Haberich
Bounce Rate - Key Performance Indikator, Ralf HaberichBounce Rate - Key Performance Indikator, Ralf Haberich
Bounce Rate - Key Performance Indikator, Ralf Haberich
luna-park GmbH
 
CBSoft 2015 - Introdução ao IBM Bluemix DevOps Services
CBSoft 2015 - Introdução ao IBM Bluemix DevOps ServicesCBSoft 2015 - Introdução ao IBM Bluemix DevOps Services
CBSoft 2015 - Introdução ao IBM Bluemix DevOps Services
Gabriel Borges
 
Was machen Kliniken in Social Media? Facebook, was sonst?!
Was machen Kliniken in Social Media? Facebook, was sonst?!Was machen Kliniken in Social Media? Facebook, was sonst?!
Was machen Kliniken in Social Media? Facebook, was sonst?!
Martin Schleicher
 
ιστορική γραμμή 1821
ιστορική γραμμή 1821ιστορική γραμμή 1821
ιστορική γραμμή 1821
raniabek
 
Toits verts et durables par claude fregeau architecte
Toits verts et durables par claude fregeau architecteToits verts et durables par claude fregeau architecte
Toits verts et durables par claude fregeau architecte
Claude Frégeau
 
[DE] Enterprise Information Management Maturity Modell | Dr. Ulrich Kampffmey...
[DE] Enterprise Information Management Maturity Modell | Dr. Ulrich Kampffmey...[DE] Enterprise Information Management Maturity Modell | Dr. Ulrich Kampffmey...
[DE] Enterprise Information Management Maturity Modell | Dr. Ulrich Kampffmey...
PROJECT CONSULT Unternehmensberatung Dr. Ulrich Kampffmeyer GmbH
 
Studying in Graz,
Studying in Graz, Studying in Graz,
Studying in Graz,
heiko.vogl
 

Andere mochten auch (20)

Search engine-optimization-starter-guide-fr
Search engine-optimization-starter-guide-frSearch engine-optimization-starter-guide-fr
Search engine-optimization-starter-guide-fr
 
Overview TRIRIGA en Français
Overview TRIRIGA en FrançaisOverview TRIRIGA en Français
Overview TRIRIGA en Français
 
Arte WC
Arte WCArte WC
Arte WC
 
CSS
CSSCSS
CSS
 
Apresentacao plansis floripa 2012
Apresentacao plansis floripa 2012Apresentacao plansis floripa 2012
Apresentacao plansis floripa 2012
 
[DE] Information Management & Qualitätsmanagement | Comarch Webinar mit Dr. U...
[DE] Information Management & Qualitätsmanagement | Comarch Webinar mit Dr. U...[DE] Information Management & Qualitätsmanagement | Comarch Webinar mit Dr. U...
[DE] Information Management & Qualitätsmanagement | Comarch Webinar mit Dr. U...
 
LotusLive - Social Business
LotusLive - Social BusinessLotusLive - Social Business
LotusLive - Social Business
 
Smarter Commerce Perspective
Smarter Commerce PerspectiveSmarter Commerce Perspective
Smarter Commerce Perspective
 
QL teens 4 teens Germany
QL teens 4 teens GermanyQL teens 4 teens Germany
QL teens 4 teens Germany
 
Treinamento Acessórios parte 03
Treinamento Acessórios parte 03Treinamento Acessórios parte 03
Treinamento Acessórios parte 03
 
MySQL Cluster, o Banco de Dados do jogo nº 1 do Facebook na América Latina
MySQL Cluster, o Banco de Dados do jogo nº 1 do Facebook na América LatinaMySQL Cluster, o Banco de Dados do jogo nº 1 do Facebook na América Latina
MySQL Cluster, o Banco de Dados do jogo nº 1 do Facebook na América Latina
 
Funções Grupo Oracle
Funções Grupo OracleFunções Grupo Oracle
Funções Grupo Oracle
 
“Portal Social como Chave para Inovação e Conhecimento” - Sidney Sossai - IBM
“Portal Social como Chave para Inovação e Conhecimento” - Sidney Sossai - IBM “Portal Social como Chave para Inovação e Conhecimento” - Sidney Sossai - IBM
“Portal Social como Chave para Inovação e Conhecimento” - Sidney Sossai - IBM
 
Bounce Rate - Key Performance Indikator, Ralf Haberich
Bounce Rate - Key Performance Indikator, Ralf HaberichBounce Rate - Key Performance Indikator, Ralf Haberich
Bounce Rate - Key Performance Indikator, Ralf Haberich
 
CBSoft 2015 - Introdução ao IBM Bluemix DevOps Services
CBSoft 2015 - Introdução ao IBM Bluemix DevOps ServicesCBSoft 2015 - Introdução ao IBM Bluemix DevOps Services
CBSoft 2015 - Introdução ao IBM Bluemix DevOps Services
 
Was machen Kliniken in Social Media? Facebook, was sonst?!
Was machen Kliniken in Social Media? Facebook, was sonst?!Was machen Kliniken in Social Media? Facebook, was sonst?!
Was machen Kliniken in Social Media? Facebook, was sonst?!
 
ιστορική γραμμή 1821
ιστορική γραμμή 1821ιστορική γραμμή 1821
ιστορική γραμμή 1821
 
Toits verts et durables par claude fregeau architecte
Toits verts et durables par claude fregeau architecteToits verts et durables par claude fregeau architecte
Toits verts et durables par claude fregeau architecte
 
[DE] Enterprise Information Management Maturity Modell | Dr. Ulrich Kampffmey...
[DE] Enterprise Information Management Maturity Modell | Dr. Ulrich Kampffmey...[DE] Enterprise Information Management Maturity Modell | Dr. Ulrich Kampffmey...
[DE] Enterprise Information Management Maturity Modell | Dr. Ulrich Kampffmey...
 
Studying in Graz,
Studying in Graz, Studying in Graz,
Studying in Graz,
 

Ähnlich wie WYSIWYG-Editoren (für Drupal 7)

Vorschau auf Drupal 8
Vorschau auf Drupal 8Vorschau auf Drupal 8
Vorschau auf Drupal 8
Nicolai Schwarz
 
APEX 5.1 Ui design crashkurs
APEX 5.1 Ui design crashkursAPEX 5.1 Ui design crashkurs
APEX 5.1 Ui design crashkurs
Steven Grzbielok
 
Dnug dresden blend 5. 5. 2010
Dnug dresden blend 5. 5. 2010Dnug dresden blend 5. 5. 2010
Dnug dresden blend 5. 5. 2010
SharepointUGDD
 
DNUG Dresden Blend
DNUG Dresden BlendDNUG Dresden Blend
DNUG Dresden Blend
Martin Hey
 
GUIs mit Expression Blend
GUIs mit Expression BlendGUIs mit Expression Blend
GUIs mit Expression Blend
.NET User Group Dresden
 
magnolia mit thymeleaf - ein agiler prozess-beschleuniger
magnolia mit thymeleaf - ein agiler prozess-beschleunigermagnolia mit thymeleaf - ein agiler prozess-beschleuniger
magnolia mit thymeleaf - ein agiler prozess-beschleuniger
Thomas Kratz
 
Pixelmechanics "eCommerce mit Magento" - Webmontag 07.06.2010
Pixelmechanics "eCommerce mit Magento" - Webmontag 07.06.2010Pixelmechanics "eCommerce mit Magento" - Webmontag 07.06.2010
Pixelmechanics "eCommerce mit Magento" - Webmontag 07.06.2010
PIXELMECHANICS
 
Web460 ppt-de-jul-wi-web-all-2020
Web460 ppt-de-jul-wi-web-all-2020Web460 ppt-de-jul-wi-web-all-2020
Web460 ppt-de-jul-wi-web-all-2020
HansruediDbeli1
 
Java Magazin 5 / 2010 - Twitter nachgebaut mit Lift
Java Magazin 5 / 2010 - Twitter nachgebaut mit LiftJava Magazin 5 / 2010 - Twitter nachgebaut mit Lift
Java Magazin 5 / 2010 - Twitter nachgebaut mit Lift
Johannes Hohenbichler
 
Webdesign Trends Teil 02 - Wie gestaltet man eine Webseite
Webdesign Trends Teil 02 - Wie gestaltet man eine WebseiteWebdesign Trends Teil 02 - Wie gestaltet man eine Webseite
Webdesign Trends Teil 02 - Wie gestaltet man eine Webseite
chrisign gmbh
 
Contao und CSS
Contao und CSS Contao und CSS
Contao und CSS
Peter Müller
 
SQL Developer 4.x - Tipps für "faule" Entwickler
SQL Developer 4.x - Tipps für "faule" EntwicklerSQL Developer 4.x - Tipps für "faule" Entwickler
SQL Developer 4.x - Tipps für "faule" Entwickler
syntegris information solutions GmbH
 
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Andreas Wissel
 
C/ C++ for Notes & Domino Developers
C/ C++ for Notes & Domino DevelopersC/ C++ for Notes & Domino Developers
C/ C++ for Notes & Domino Developers
Ulrich Krause
 
Content Construction Kit's für Joomla
Content Construction Kit's für JoomlaContent Construction Kit's für Joomla
Content Construction Kit's für Joomla
David Jardin
 
Rapid Application Development mit Openobject
Rapid Application Development mit OpenobjectRapid Application Development mit Openobject
Rapid Application Development mit Openobject
openbig
 
BASTA! Spring 2018 - Architekturen für .NET Core-Anwendungen
BASTA! Spring 2018 - Architekturen für .NET Core-AnwendungenBASTA! Spring 2018 - Architekturen für .NET Core-Anwendungen
BASTA! Spring 2018 - Architekturen für .NET Core-Anwendungen
Robin Sedlaczek
 
Medienmanagement mit Drupal 7
Medienmanagement mit Drupal 7Medienmanagement mit Drupal 7
Medienmanagement mit Drupal 7
Nicolai Schwarz
 
WordPress-Präsentation
WordPress-PräsentationWordPress-Präsentation
WordPress-Präsentation
pfw208br
 

Ähnlich wie WYSIWYG-Editoren (für Drupal 7) (20)

Vorschau auf Drupal 8
Vorschau auf Drupal 8Vorschau auf Drupal 8
Vorschau auf Drupal 8
 
APEX 5.1 Ui design crashkurs
APEX 5.1 Ui design crashkursAPEX 5.1 Ui design crashkurs
APEX 5.1 Ui design crashkurs
 
Dnug dresden blend 5. 5. 2010
Dnug dresden blend 5. 5. 2010Dnug dresden blend 5. 5. 2010
Dnug dresden blend 5. 5. 2010
 
DNUG Dresden Blend
DNUG Dresden BlendDNUG Dresden Blend
DNUG Dresden Blend
 
GUIs mit Expression Blend
GUIs mit Expression BlendGUIs mit Expression Blend
GUIs mit Expression Blend
 
magnolia mit thymeleaf - ein agiler prozess-beschleuniger
magnolia mit thymeleaf - ein agiler prozess-beschleunigermagnolia mit thymeleaf - ein agiler prozess-beschleuniger
magnolia mit thymeleaf - ein agiler prozess-beschleuniger
 
Pixelmechanics "eCommerce mit Magento" - Webmontag 07.06.2010
Pixelmechanics "eCommerce mit Magento" - Webmontag 07.06.2010Pixelmechanics "eCommerce mit Magento" - Webmontag 07.06.2010
Pixelmechanics "eCommerce mit Magento" - Webmontag 07.06.2010
 
Web460 ppt-de-jul-wi-web-all-2020
Web460 ppt-de-jul-wi-web-all-2020Web460 ppt-de-jul-wi-web-all-2020
Web460 ppt-de-jul-wi-web-all-2020
 
Java Magazin - Lift
Java Magazin - LiftJava Magazin - Lift
Java Magazin - Lift
 
Java Magazin 5 / 2010 - Twitter nachgebaut mit Lift
Java Magazin 5 / 2010 - Twitter nachgebaut mit LiftJava Magazin 5 / 2010 - Twitter nachgebaut mit Lift
Java Magazin 5 / 2010 - Twitter nachgebaut mit Lift
 
Webdesign Trends Teil 02 - Wie gestaltet man eine Webseite
Webdesign Trends Teil 02 - Wie gestaltet man eine WebseiteWebdesign Trends Teil 02 - Wie gestaltet man eine Webseite
Webdesign Trends Teil 02 - Wie gestaltet man eine Webseite
 
Contao und CSS
Contao und CSS Contao und CSS
Contao und CSS
 
SQL Developer 4.x - Tipps für "faule" Entwickler
SQL Developer 4.x - Tipps für "faule" EntwicklerSQL Developer 4.x - Tipps für "faule" Entwickler
SQL Developer 4.x - Tipps für "faule" Entwickler
 
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
 
C/ C++ for Notes & Domino Developers
C/ C++ for Notes & Domino DevelopersC/ C++ for Notes & Domino Developers
C/ C++ for Notes & Domino Developers
 
Content Construction Kit's für Joomla
Content Construction Kit's für JoomlaContent Construction Kit's für Joomla
Content Construction Kit's für Joomla
 
Rapid Application Development mit Openobject
Rapid Application Development mit OpenobjectRapid Application Development mit Openobject
Rapid Application Development mit Openobject
 
BASTA! Spring 2018 - Architekturen für .NET Core-Anwendungen
BASTA! Spring 2018 - Architekturen für .NET Core-AnwendungenBASTA! Spring 2018 - Architekturen für .NET Core-Anwendungen
BASTA! Spring 2018 - Architekturen für .NET Core-Anwendungen
 
Medienmanagement mit Drupal 7
Medienmanagement mit Drupal 7Medienmanagement mit Drupal 7
Medienmanagement mit Drupal 7
 
WordPress-Präsentation
WordPress-PräsentationWordPress-Präsentation
WordPress-Präsentation
 

Mehr von Nicolai Schwarz

Gadgets Galore - Barcamp Hamburg, Nov 2015
 Gadgets Galore - Barcamp Hamburg, Nov 2015 Gadgets Galore - Barcamp Hamburg, Nov 2015
Gadgets Galore - Barcamp Hamburg, Nov 2015
Nicolai Schwarz
 
Gadgets Galore - Barcamp Düsseldorf, Okt 2015
Gadgets Galore - Barcamp Düsseldorf, Okt 2015Gadgets Galore - Barcamp Düsseldorf, Okt 2015
Gadgets Galore - Barcamp Düsseldorf, Okt 2015
Nicolai Schwarz
 
DNA von Gadgets
DNA von GadgetsDNA von Gadgets
DNA von Gadgets
Nicolai Schwarz
 
Gadgets Galore
Gadgets GaloreGadgets Galore
Gadgets Galore
Nicolai Schwarz
 
Barrierefreiheit im Fokus: 12 Beispiele für Accessibility
Barrierefreiheit im Fokus: 12 Beispiele für AccessibilityBarrierefreiheit im Fokus: 12 Beispiele für Accessibility
Barrierefreiheit im Fokus: 12 Beispiele für Accessibility
Nicolai Schwarz
 
Responsive Design mit Drupal
Responsive Design mit DrupalResponsive Design mit Drupal
Responsive Design mit Drupal
Nicolai Schwarz
 
iico 2011: Webdesign-Trends
iico 2011: Webdesign-Trendsiico 2011: Webdesign-Trends
iico 2011: Webdesign-Trends
Nicolai Schwarz
 
Türme bauen mit Schildbürgern (Webtech Edition)
Türme bauen mit Schildbürgern (Webtech Edition)Türme bauen mit Schildbürgern (Webtech Edition)
Türme bauen mit Schildbürgern (Webtech Edition)
Nicolai Schwarz
 
Türme bauen mit Schildbürgern
Türme bauen mit SchildbürgernTürme bauen mit Schildbürgern
Türme bauen mit Schildbürgern
Nicolai Schwarz
 
Nicolai Schwarz: Einführung in SEO
Nicolai Schwarz: Einführung in SEONicolai Schwarz: Einführung in SEO
Nicolai Schwarz: Einführung in SEO
Nicolai Schwarz
 
Nicolai Schwarz: Die moderne Webseite
Nicolai Schwarz: Die moderne WebseiteNicolai Schwarz: Die moderne Webseite
Nicolai Schwarz: Die moderne Webseite
Nicolai Schwarz
 
Nicolai Schwarz Barrierefreiheit
Nicolai Schwarz BarrierefreiheitNicolai Schwarz Barrierefreiheit
Nicolai Schwarz Barrierefreiheit
Nicolai Schwarz
 
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
Nicolai Schwarz
 

Mehr von Nicolai Schwarz (13)

Gadgets Galore - Barcamp Hamburg, Nov 2015
 Gadgets Galore - Barcamp Hamburg, Nov 2015 Gadgets Galore - Barcamp Hamburg, Nov 2015
Gadgets Galore - Barcamp Hamburg, Nov 2015
 
Gadgets Galore - Barcamp Düsseldorf, Okt 2015
Gadgets Galore - Barcamp Düsseldorf, Okt 2015Gadgets Galore - Barcamp Düsseldorf, Okt 2015
Gadgets Galore - Barcamp Düsseldorf, Okt 2015
 
DNA von Gadgets
DNA von GadgetsDNA von Gadgets
DNA von Gadgets
 
Gadgets Galore
Gadgets GaloreGadgets Galore
Gadgets Galore
 
Barrierefreiheit im Fokus: 12 Beispiele für Accessibility
Barrierefreiheit im Fokus: 12 Beispiele für AccessibilityBarrierefreiheit im Fokus: 12 Beispiele für Accessibility
Barrierefreiheit im Fokus: 12 Beispiele für Accessibility
 
Responsive Design mit Drupal
Responsive Design mit DrupalResponsive Design mit Drupal
Responsive Design mit Drupal
 
iico 2011: Webdesign-Trends
iico 2011: Webdesign-Trendsiico 2011: Webdesign-Trends
iico 2011: Webdesign-Trends
 
Türme bauen mit Schildbürgern (Webtech Edition)
Türme bauen mit Schildbürgern (Webtech Edition)Türme bauen mit Schildbürgern (Webtech Edition)
Türme bauen mit Schildbürgern (Webtech Edition)
 
Türme bauen mit Schildbürgern
Türme bauen mit SchildbürgernTürme bauen mit Schildbürgern
Türme bauen mit Schildbürgern
 
Nicolai Schwarz: Einführung in SEO
Nicolai Schwarz: Einführung in SEONicolai Schwarz: Einführung in SEO
Nicolai Schwarz: Einführung in SEO
 
Nicolai Schwarz: Die moderne Webseite
Nicolai Schwarz: Die moderne WebseiteNicolai Schwarz: Die moderne Webseite
Nicolai Schwarz: Die moderne Webseite
 
Nicolai Schwarz Barrierefreiheit
Nicolai Schwarz BarrierefreiheitNicolai Schwarz Barrierefreiheit
Nicolai Schwarz Barrierefreiheit
 
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
 

WYSIWYG-Editoren (für Drupal 7)

  • 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.
  • 26. EINFACH ZU INSTALLIEREN Drei Möglichkeiten * Modul WYSIWYG * Einzelmodul (CKEditor) * selbst für die Anbindung sorgen
  • 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.