So sieht’s aus

Hauptsache kundenfreundlich und einfach zu konfigurieren
Kommentare

Ein WYSIWYG-Editor ist zwar im Sinne des Kunden, kann einem Webworker aber viel Arbeit machen. Denn der Editor soll es dem User auf der einen Seite leicht machen, auf der anderen aber ordentlichen Quellcode ausgeben. Dabei muss der Editor in Kombination mit dem Content-Management-System eine ganze Reihe an Anforderungen erfüllen.

WYSIWYG steht für „what you see is what you get“, das hat sich mittlerweile auch schon bei einigen Kunden herumgesprochen. Und so ein Editor ist dann auch das, was sie sich für ihre Webseite wünschen. Schließlich kennen sie es so aus Word: Ein B macht den Text fett, ein I macht ihn kursiv (Abb. 1). So soll es der Editor anzeigen – und so soll es hinterher auch auf der Webseite erscheinen.

Abb. 1: Bekannte Buttons aus WordAbb. 1: Bekannte Buttons aus Word

Der Kunde an sich hat meist einfache Wünsche an einen Texteditor. Er möchte Text fetten, kursiv stellen, Listen erstellen und Bilder bzw. Links einfügen. Erste Probleme gibt es aber schon, wenn er Tabellen nicht finden kann oder aber fragt, wie er Text größer oder gar farbig machen kann.

WYSIWYG-Editoren

TinyMCE

TinyMCE ist ein sehr umfangreicher Editor, auf den z. B. auch WordPress aufsetzt. Für diesen Editor lassen sich eigene Themes programmieren, außerdem stehen zahlreiche Plug-ins zur Verfügung.Homepage

FCKEditor/CKEditor

Der FCKEditor heißt seit August 2009 nur noch CKEditor. Zusammen mit dem TinyMCE gehören die beiden sicher zu den bekanntesten und umfangreichsten.Homepage

Der Webworker will es seinem Kunden möglichst einfach machen. Aber der Kunde soll auch nicht gleich alles dürfen. JavaScript, PHP und auch das ein oder andere HTML-Element sollen automatisch ausgefiltert werden. Eine Tabelle wird von Kunden schnell mal als Designkrücke genutzt; ein Webworker will Tabellen aber nur für reine Tabellendaten verwenden. Der Editor muss nicht unbedingt selbst schon den Quellcode filtern, er kann zunächst alle Eingaben akzeptieren, erst bei der Ausgabe der Daten sorgt das Content-Management-System dafür, dass unerwünschte Elemente aussortiert werden. Alles eine Frage des Zusammenspiels.

Technisch funktionieren die Editoren alle nach demselben Prinzip. Per JavaScript wird eine textarea gegen ein div oder meist ein iframe ausgetauscht, weil die texarea keine Bilder enthalten kann. Die weiteren Funktionen beim Klick auf einen Button werden ebenfalls über JavaScript abgewickelt. Dazu kommt PHP, um mit dem Server zu kommunizieren. Wenn der Kunde kein JavaScript eingeschaltet hat, kann er den Editor also auch nicht nutzen.

Weniger ist mehr

Zunächst stellt sich die Frage, welche Schaltflächen der Editor zur Verfügung stellen soll. Dazu sollte er möglichst einfach zu konfigurieren sein. Die Funktionen müssen einzeln zu- und abschaltbar sein. Der bekannte Editor TinyMCE zum Beispiel bietet eine riesige Menge an Funktionen (Abb. 2). Die Demo zeigt 78 Icons und vier Auswahllisten. Soviel braucht keine Webseite auf einmal, da gilt es auszusieben.

Abb. 2: TinyMCE mit allen Plug-ins und ButtonsAbb. 2: TinyMCE mit allen Plug-ins und Buttons (Zum vergrößern klicken)

In der Dokumentation von TinyMCE findet man schnell die richtige Stelle, um seine Button-Leisten zu konfigurieren:

tinyMCE.init({
 ...
 theme_advanced_buttons1 : "bold,italic,underline",
 theme_advanced_buttons2 : "",
 theme_advanced_buttons3 : ""
});

Diese Option steht für das advanced theme des TinyMCE zur Verfügung. Hiermit werden in der ersten Reihe Buttons für Fett, Kursiv und Unterstrichen zur Verfügung gestellt, weitere Reihen werden gar nicht erst angezeigt. Für den YUI Rich Text Editor gibt es ähnliche Möglichkeiten, die Toolbar zu beeinflussen. Auch hier hilft einem die Dokumentation weiter und liefert folgendes Beispiel:

{
{ id: 'b3', type: 'button', label: 'Underline', value: 'underline' },
{ type: 'separator' },
{ id: 'b4', type: 'menu', label: 'Align', value: 'align',
menu: [
{ text: "Left", value: 'alignleft' },
{ text: "Center", value: 'aligncenter' },
{ text: "Right", value: 'alignright' }
]
}
}

Auch das ist vergleichsweise einfach zu lesen: Es gibt einen Button zum Unterstreichen, dann einen Trennstrich, dann folgen drei Optionen, um Text auszurichten. Andere Editoren bieten ihre eigenen, leicht unterschiedlichen Codes. Es ist jedoch nicht unbedingt notwendig, den jeweiligen Editor direkt über solche Formate zu konfigurieren. Manchmal stehen entsprechende Module für ein CMS zur Verfügung, die wiederum die Einstellungen für den Editor übernehmen. Dann lassen sich Buttons über die Benutzeroberfläche des CMS ein- und ausschalten (Abb. 3).

Abb. 3: Das Drupal-Modul WYSIWYG unterstützt gleich mehrere Editoren: FCKeditor, jWYSIWYG, markItUp, NicEdit, openWYSIWYG, TinyMCE, Whizzywig, WYMeditor und YUI editorAbb. 3: Das Drupal-Modul WYSIWYG unterstützt gleich mehrere Editoren: FCKeditor, jWYSIWYG, markItUp, NicEdit, openWYSIWYG, TinyMCE, Whizzywig, WYMeditor und YUI editor (Zum vergrößern klicken)

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -