Diese Woche möchte ich über ein Attribut schreiben, das einige von euch ggf. bereits (unwissentlich?) benutzt haben – Es geht um „contenteditable„. WYSIWYG Editoren benutzen dieses Attribut um eine große Menge an Javascript zu ersparen.

Um Inhalte einer Webseite / Web-Applikation in Echtzeit zu bearbeiten werden häufig und gerne WYSIWYG Editoren eingesetzt – Diese ermöglichen zusätzlich zur „normalen“ Texteingabe (z.B. eines „textarea“ Elements) die Formatierung von Text:

Fett
Kursiv
Unterstrichen
Listen

und noch vieles mehr…

Das eigentliche Attribut
Unser Attribut kann auf sämtliche Elemente angewandt werden, z.B. auf Paragraphen oder DIVs – dabei sollte dessen Wert entweder „true„, „false“ oder „inherit“ sein. Wird kein Wert angegeben, wird es wie „true“ interpretiert:

<span contenteditable="true">Editierbarer Paragraph</span>
oder
<span contenteditable>Editierbarer Paragraph</span>

Das Ergebnis sieht folgendermaßen aus (Reinklicken und schreiben!):

Editierbarer Paragraph

Browser Kompatibilität
Hier gibt es eine große Überraschung: Obwohl das Attribut eigentlich zum HTML5 Standard gehört, unterstützen es bereits alle bedeutenden Browser – Selbst der Internet Explorer (und das sogar seit der Version 5.5!!).

Browser	Version
Chrome	4.0+
Safari	3.1+
Firefox	3.5+
Opera	9.0+
Internet Explorer	5.5+

Einige WYSIWYG-Editor Beispiele

Im Grunde werden wohl die meisten aktuellen Editoren auf das contenteditable setzen – hier ein paar Beispiele:
HTML5 Editor in klassischer Optik http://nicedit.com/ und http://imperavi.com/redactor/. Weiterhin gibt es auch noch sogenannte „Inline-Editoren“ wie z.B. den Aloha Editor – außerdem gibt es auch hybriden aus diesen beiden Typen wie z.B. beim SnapEditor.

Die womöglich bekanntesten und am weitesten verbreiteten Editor dürften der CKEditor und der tinyMCE sein. Diese bieten sicherlich die meisten Features, bringen aber auch ganz schön was auf die Waage… Sowohl was die Dateien (= Speicherverbrauch) als auch Javascript, Icons und Übersetzungen angeht

Browser unterschiede

Wer mit Javascript die Inhalte eines editierbaren Elements ausließt wird vielleicht auf folgendes stoßen:
Während einige Browser (wie z.B. Firefox) Zeilenumbrüche mit „<br />“ umsetzt, werden bei anderen (wie z.B. Chrome) DIVs benutzt.

Sonstige Anwendungsfälle?

Also abgesehen von WYSIWYG Editoren…? Nun, da wir sämtliche HTML Elemente verändern können, gilt dieses unter anderem auch für das Style-Element! Das bedeutet wir können, ganz ohne Firebug Plugin oder Web-Entwickler Tools, CSS in echtzeit editieren. Sofern wir das Element zuerst mal sichtbar machen:

<style style="display:block;" contenteditable="true">
strong {
   color: #f00;
}
</style>

Das funktioniert zwar Grundlegend auch mit Javascript, allerdings werden diese Änderungen nicht übernommen, da der Browser das geänderte Javascript nicht erneut evaluiert. Zumindest konnte ich keine alert()’s oder ähnliches provozieren.

Fallbacks?

Wie bereits geschrieben wird dieses Attribut in allen wichtigen Browsern unterstützt… Fallbacks lassen sich sicherlich nur mit Hilfe von massig Javascript und anderen Spielereien bauen. Ich meine mich zu erinnern, das „frühere“ WYSIWYG Editoren unter anderem mit iframes und versteckten textareas gearbeitet haben… Doch ich denke hierzu brauchen wir keine weiteren Gedanken verschwenden.

Oh und das Attribut lässt sich, wie dessen Vorgänger download, autofocus und hidden, ganz einfach mit Javascript auslesen:

// Prototype Syntax, bitte beachtet das große "E" in "contentEditable".
if (typeof $('mein-element').contentEditable == 'undefined') {
   // Der Browser unterstützt das Attribut nicht.
}

Mit diesen abschließenden Worten möchte ich euch eine angenehme und sonnige Woche als auch „Happy Coding“ wünschen!