So sieht’s aus

Hauptsache kundenfreundlich und einfach zu konfigurieren
Kommentare

Für grundlegende Funktionen reichen die Buttons für fett/kursiv, die Überschriften ( bis ) und Absätze, Listen, Links und Bilder. Wenn der Kunde sich besser auskennt, mögen auch Tabellen, Blockzitate,

Für grundlegende Funktionen reichen die Buttons für fett/kursiv, die Überschriften (

bis

) und Absätze, Listen, Links und Bilder. Wenn der Kunde sich besser auskennt, mögen auch Tabellen, Blockzitate, Definitionslisten oder Akronyme und Abkürzungen in Frage kommen (Abb. 4 und 5).

Abb. 4: Übliche Buttons in einer WordPress-InstallationAbb. 4: Übliche Buttons in einer WordPress-Installation (Zum vergrößern klicken)

Abb. 5: Angepasste Leiste in einem Redaktionssystem. Zwischenüberschriften kommen in diesem Fall erst ab h4 in Frage, weil die Überschrift der Artikel bereits als h3 ausgezeichnet wird.Abb. 5: Angepasste Leiste in einem Redaktionssystem. Zwischenüberschriften kommen in diesem Fall erst ab h4 in Frage, weil die Überschrift der Artikel bereits als h3 ausgezeichnet wird. (Zum vergrößern klicken)

In jedem Fall sollte der Kunde keine Möglichkeiten haben, die Schrift – etwa durch das -Element – zu beeinflussen oder irgendwelche Abstände oder Farben z. B. über Inline Styles zu ändern. Das Aussehen soll über eine Website konsistent erscheinen, und dafür sind allgemeine CSS-Angaben nötig.

Quellcode nach Standards

Freilich sollte der erzeugte Code Webstandards entsprechen. Webstandards sind nicht erst seit gestern ein Thema im Web. Man sollte erwarten, dass sich moderne Editoren darum bemühen. Trotzdem kann es passieren, dass der Editor selbst bereits horrenden Blödsinn erzeugt. So z. B. die aktuelle Version vom NicEdit. Ein Klick auf die Schaltflächen FETT undKURSIV erzeugt dort die HTML-Codes: fett und kursiv. Die HTML-Elemente und wären schon schlimm genug, Spans mit Inline Styles sind einfach nur inkompetent. Richtig wäre es, die Elemente und zu vergeben. Eigentlich ist das bereits ein Ausschlusskriterium für einen WYSIWYG-Editor. Es sei denn, der Webworker macht sich die Mühe, die Ausgabe zu ändern – und den Editor selbst umzuprogrammieren (Abb. 6).

Abb. 6: NicEdit: Der erzeugte Quellcode ist in dieser Form nicht zu gebrauchenAbb. 6: NicEdit: Der erzeugte Quellcode ist in dieser Form nicht zu gebrauchen

Import aus Word

YUI Library: Rich Text Editor

Unter Yahoos zahlreichen freien Bibliotheken findet sich auch ein WYSIWYG-Editor, zusammen mit zahlreichen Demos zur Erweiterung des Editors. Es gibt Besonderheiten wie die Möglichkeiten, Bilder von Flickr zu laden, oder einen Kalender, um bequemer Daten auswählen zu können.Homepage

Xinha

Ebenso wie XMLArea ist auch Xinha aus dem eingestellten Editor htmlArea hervorgegangen.Xinha

NicEdit

Ein kleiner Editor, der sich leider nicht um Webstandards schert.Homepage

Regelmäßige Probleme bereiten Inhalte, die der Kunde aus einem anderen Programm in den Editor kopiert – in den meisten Fällen wird es aus Word heraus passieren. Zu sehen sind vielleicht nur ein paar Absätze, Überschriften und Fließtext. Im Hintergrund verbergen sich aber verschiedene Word-Formate, die auf der Webseite für Ärger sorgen können. Nun könnte man dem Kunden sagen, er solle eben nicht aus Word in den Editor kopieren oder aber über den Umweg eines Texteditors gehen. Das ist natürlich nicht im Sinne des Kunden, also sollte der Webworker nach Lösungen suchen. Dazu gibt es mehrere Möglichkeiten. Entweder bereinigt der Editor seinen Inhalt selbstständig und schmeißt unnötige Formate heraus oder aber es gibt zumindest Buttons dafür – die muss der Kunde dann natürlich auch nutzen. Hier bieten etwa TinyMCE und CKEditor PASTE FROM WORD an, Xinha hat einen CLEAR MSOFFICE TAGS-Button, für den YUI Rich Text Editor gibt es ein Plug-in namens CleanPaste.js, das unnötige Formate herausfiltert. Zuletzt gäbe es die Option, Inhalte mit Word-Code erst einmal zu speichern, aber bei der Ausgabe zu filtern. Darauf komme ich später zurück.

Mehr Service mit einem File Manager

Ist der Text erst einmal im System, will der Kunde auch Bilder einfügen und Dateien verlinken können. Dazu muss der Editor zumindest anbieten, Daten hochladen und den Server durchsuchen zu können. Manchmal geht das über den Editor selbst, in anderen Fällen kann ein zusätzliches Modul diesen Job übernehmen. Für Drupal gibt es z. B. das Modul IMCE, einen Bild- und Dateimanager, der dort gut mit FCKEditor, TinyMCE, WYMEditor oder Whizzywig zusammenarbeitet.

Bei Dateien reicht es aus, einen Link zu setzen. Bei Bildern wird es schwieriger, denn viele Editoren bieten zu viele Möglichkeiten an. Beim CKEditor (Abb. 7) etwa können User einen Rahmen setzen (border), vertikalen (vspace) oder horizontalen Abstand (hspace) angeben, eine ID vergeben oder zusätzlich Styles festlegen. Das ist in der Form für den Kunden nicht übersichtlich, im Rahmen von Webstandards nicht erstrebenswert und gefährdet außerdem das einheitliche Design der Seite.

Abb. 7: Bildauswahl im CKEditor: in der Grundversion zu viele OptionenAbb. 7: Bildauswahl im CKEditor: in der Grundversion zu viele Optionen

Whizzywig

Der Exot in dieser Reihe. Dargeboten auf einer hässlichen Webseite, gepaart mit einer hässlichen Demo, die auch noch einen veralteten Button für 216 websichere Farben anbietet. Dafür ist der Quellcode mit 500 Zeilen extrem übersichtlich.Homepage

Im Idealfall reichen für die meisten Kunden diese Felder: Bild hochladen oder vom Server aussuchen, alt-Text festlegen, optional einen Ziellink festlegen und eine Klasse vergeben, nämlich rechts, links oder mitte. Alle unwichtigen Felder sollten gar nicht erst zur Verfügung stehen. Hier stellt sich nun die Frage: Wie schwierig ist es, solche Felder zu editieren? Auch für den CKEditor gibt es umfangreiche Optionen, den Dialog für die Bilder zu ändern – aber dafür muss man sich in den jeweiligen Editor einarbeiten und sich vor allem mit JavaScript auskennen. Wenn man sich nicht die Mühe machen möchte, die Dialogfelder selbst zu formatieren, gibt es auch hier die Möglichkeit, erst einmal alles zu akzeptieren, unerwünschte Attribute aber beim Aufruf der Seite auszufiltern. Nun könnte ein User ein Design immer noch durch zu große Bilder stören. Deshalb ist es sinnvoll, zu große Bilder gleich beim Hochladen auf eine Größe herunterzurechnen, die noch ins Design passt. Auch dafür bieten die meisten CMS eigene Module an.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -