15 Februar 2009

contentEditable

...heute mal aus der Reihe "Dinge, die ich so bisher noch nie wirklich benutzt habe": Das contentEditable-Attribut. In eigentlich allen neuen Browsern ist auch "ein rich-text-Editor eingebaut" (in der Gecko-Engine heißt das Ding "Midas") - man kennt diese meist aus CMSystemen, die oft js-Editoren wie den fckeditor verwenden. Man kann die API für den im Browser eingebauten Editor natürlich auch selber ansprechen.
Ich habe dazu mal eine kleine Demo gebaut, die den Text in einem DIV-Tag mit dem Attribut contentEditable zum Bearbeiten freischaltet. (Die alternative Möglichkeit ist, das ganze Dokument mit designMode=on bearbeitbar zu machen).
Über das DHTML-Kommando document.execCommand (die Liste der möglichen Kommandos findet man auf mozilla.org) kann der markierte Text dann entsprechend verändert werden.
Unter 'Resultat' zeigt die Demo nach dem Abschicken des bearbeiteten Textes, was dann beim Server ankommt. Einfach mal mit verschiedenen Browsern ausprobieren und in den Quelltext schauen.
Um mal ein bisschen hinter die Kulissen zu blicken sicherlich so weit ganz interessant, für den tatsächlichen Einsatz lohnt es sich aber, einen fertigen Editor zu verwenden und evtl. nach den eigenen Bedürfnissen anzupassen. Mir gefällt insbesondere TinyMCE von Moxiecode, da er sich sehr leicht integrieren und konfigurieren läßt.

Labels: , , ,