HTML5-Handbuch - die neuen Features von HTML5

Attributs
contenteditable
. Sie können dieses Attribut in allen HTML-Elementen notieren, in denen es sinnvoll erscheint, da es sich um ein globales Attribut handelt.
    Durch das Attribut alleine entsteht jedoch noch kein Richtext-Editor. Wenn Sie sonst keine Steuerungsmöglichkeiten anbieten, kann der Anwender einfach Text mit den optischen Eigenschaften editieren, die das Element besitzt. Wenn Sie es mit Hilfe von CSS formatieren, kann der Anwender Text mit den definierten Style-Eigenschaften editieren, jedoch keine Textstellen anders formatieren. Das geht nur mit Hilfe von Steuerelementen und etwas Scripting.
    Die
button
-Elemente, die im obigen Beispiel die Steuerschaltflächen definieren, enthalten jeweils einen Event-Handler
onclick
. All diesen Event-Handlern wird – mit einer Ausnahme – der Aufruf einer Funktion namens
format(…)
zugewiesen. Die entsprechende Funktion ist im Dokumentkopf innerhalb des
script
-Bereichs notiert. Sie erwartet zwei Parameter, die bei den Aufrufen jeweils übergeben werden. Die Funktion ruft eine Objektmethode namens
document.execCommand()
auf und übergibt ihr die Parameter, die sie selbst erhalten hat.
    Die Kombination aus einem Element mit dem Attribut
contenteditable
, Steuerelementen und Script-Aufrufen der Methode
document.execCommand()
ist das Gerüst für einen Richtext-Editor. Damit die Daten aus dem
div
-Element im obigen Beispiel jedoch beim Absenden des Formulars als Formulardaten übertragen werden, müssen sie vor dem Absenden noch schnell in ein Formularfeld übertragen werden. Zu diesem Zweck enthält das einleitende

-Tag im Beispiel einen Event-Handler
onsubmit
. Wenn der Anwender auf die Submit-Schaltfläche (OK) am Ende des Formulars klickt, wird der Script-Code ausgeführt, der diesem Event-Handler zugewiesen ist. Im obigen Beispiel ist das ein Aufruf der Funktion
postEdit()
, die ebenfalls im Dokumentkopf notiert ist. Sie überträgt den HTML-Inhalt des
div
-Elements in das
value
-Attribut des versteckten Formularfelds. Da dies ein gewöhnliches Formularfeld ist, wird der editierte Text mitsamt aller darin enthaltenen HTML-Formatierungen an den Server übertragen und kann dort verarbeitet werden.
Weitere Hinweise
    Normalerweise würde ein Richtext-Feld beim Editieren einfach mit der Menge seines Inhalts mitwachsen. Damit es eher wie ein Formularfeld wirkt, mit definierter Höhe und Scrollbalken bei umfangreicherem Inhalt, können Sie das betroffene HTML-Element mit Hilfe von CSS entsprechend präparieren. Im obigen Beispiel hat das
div
-Element mit der CSS-Angabe
height: 150px;
eine gewünschte Höhe von 150 Pixeln erhalten, und die Angabe
overflow: scroll;
stellt sicher, dass bei größeren Inhalten die Höhe eingehalten wird und stattdessen ein Scrollbalken angezeigt wird.
    Diese Objektmethode
document.execCommand()
wird zwar von allen maßgeblichen neueren Browsern interpretiert. Es gibt allerdings im Detail eine Reihe ärgerlicher Unterschiede in den Implementierungen. Professionelle Richtext-Editoren versuchen, diese Uneinheitlichkeiten durch zusätzliches Scripting auszugleichen und zu vereinheitlichen.
Nachfolgend Links zu professionellen Lösungen für WYSIWYG-Editoren, die sich in Webseiten einbetten lassen:
    CKEditor (früher: FCKEditor)
    http://ckeditor.com/
    TinyMCE Editor
    http://tinymce.moxiecode.com/
    Ohne aktiviertes JavaScript ist ein Richtext-Editor nicht realisierbar. Im Frontend-Bereich, also auf Publikums-Webseiten, müssen Sie stets damit rechnen, dass ein kleiner Teil der Besucher die Funktionalität nicht nutzen kann, weil diese Anwender JavaScript in ihrem Browser deaktiviert haben.
Referenzinformationen
    Attributreferenz
contenteditable
:

9     Mikrodaten und globale Attribute
•    Was Mikrodaten sind
•    Wie Sie Mikrodaten in HTML5 kodieren
•    Welche Attribute Sie in allen Elementen notieren können und wie Sie solche Attribute sinnvoll einsetzen
9.1        Mikrodaten
    Angenommen, eine Webseite enthält Veranstaltungshinweise. Veranstaltungen sind Termine, bestehend aus Felddaten wie »was?«, »wann?« und »wo?«. Egal, welche HTML-Elemente zum Einsatz kommen, um solche Veranstaltungen auszuzeichnen: Die eigentlichen Daten der Veranstaltung stehen irgendwo im Fließtext und sind als solche nicht weiter identifizierbar. An diesem Punkt setzen Mikrodaten an: Sie bieten Web-Autoren ein Instrumentarium, um identifizierbare Felddaten in Dokumenten gezielt auszuzeichnen.
Die Syntax, welche HTML5