Strict Standards: Declaration of action_plugin_importoldchangelog::register() should be compatible with DokuWiki_Action_Plugin::register($controller) in /kunden/doogie.de/wiki/lib/plugins/importoldchangelog/action.php on line 8

Strict Standards: Declaration of action_plugin_bloglinks::register() should be compatible with DokuWiki_Action_Plugin::register($controller) in /kunden/doogie.de/wiki/lib/plugins/bloglinks/action.php on line 191

Strict Standards: Declaration of action_plugin_tag::register() should be compatible with DokuWiki_Action_Plugin::register($controller) in /kunden/doogie.de/wiki/lib/plugins/tag/action.php on line 117

Strict Standards: Declaration of action_plugin_importoldindex::register() should be compatible with DokuWiki_Action_Plugin::register($controller) in /kunden/doogie.de/wiki/lib/plugins/importoldindex/action.php on line 57

Strict Standards: Declaration of action_plugin_discussion::register() should be compatible with DokuWiki_Action_Plugin::register($controller) in /kunden/doogie.de/wiki/lib/plugins/discussion/action.php on line 1144

Strict Standards: Declaration of action_plugin_feedmod::register() should be compatible with DokuWiki_Action_Plugin::register($controller) in /kunden/doogie.de/wiki/lib/plugins/feedmod/action.php on line 133

Strict Standards: Declaration of action_plugin_blockquote::register() should be compatible with DokuWiki_Action_Plugin::register($controller) in /kunden/doogie.de/wiki/lib/plugins/blockquote/action.php on line 61

Strict Standards: Declaration of action_plugin_blog::register() should be compatible with DokuWiki_Action_Plugin::register($controller) in /kunden/doogie.de/wiki/lib/plugins/blog/action.php on line 171

Strict Standards: Declaration of action_plugin_include::register() should be compatible with DokuWiki_Action_Plugin::register($controller) in /kunden/doogie.de/wiki/lib/plugins/include/action.php on line 142

Strict Standards: Declaration of action_plugin_openid::register() should be compatible with DokuWiki_Action_Plugin::register($controller) in /kunden/doogie.de/wiki/lib/plugins/openid/action.php on line 534

Warning: Cannot modify header information - headers already sent by (output started at /kunden/doogie.de/wiki/lib/plugins/importoldchangelog/action.php:8) in /kunden/doogie.de/wiki/inc/auth.php on line 313

Warning: Cannot modify header information - headers already sent by (output started at /kunden/doogie.de/wiki/lib/plugins/importoldchangelog/action.php:8) in /kunden/doogie.de/wiki/inc/actions.php on line 163
DoogiesWiki [blog:html5_contenteditable]

HTML5 Contenteditable

Was würdet ihr tun?

Die Voraussetzungen

Meine Webseite doogie.de ist ein Wiki. Ich bin ein großer Fan von Wikis. Die Idee, dass prinzipell jeder Besucher einer Seite diese editieren und verbessern kann begeistert mich. Selbstverständlich ist mir klar, dass das eine völlig unrealistische Utopie ist - zumindest für eine private Webseite. So etwas mag funktionieren für eine riesige Userbase, wie sie Wikipedia hat. Aber auch dort nur mit viel Aufwand. (Auch wikipedia hat große Probleme mit "schmierfinken".)

Das Problem

Zurück zu meiner privaten Seite: Leider hat sich über die letzten Jahre Testphase eindeutig gezeigt, dass allein die Barriere einen (wirklich einfachen) WikiSyntax zu lernen (z.B. Sternchen machen *fett*) so gut wie alle Besucher davon abhält auch nur ein Wort zu editieren.

Lösungansätze

Es gibt echt nette inPlace WYSIWYG editoren. http://medleyweb.com/resources/10-best-free-javascript-or-jquery-wysiwyg-html-editors/

(Oder zum Beispiel den hier, ein JavaScript diamant, nach langem suchen zufällig entdeckt: http://dev.justinmaier.com/inlineEdit3/)

Aber irgendwie fühlt sich das an wie "mit Kanonen auf spatzen schießen. Das muss doch einfacher gehen!

Die Lösung

Der Auto des obigen Editors wies mich darauf hin, dass es in HTML5 ein Attribut contenteditable="true" gibt. Wenn man das z.B. für einen <P>aragraph setzt, dann wird dieser automatisch editierbar. DAs ist eine native Funktion die inzwischen von allen modernen Browsern unterstützt wird. Hey wow! Genau was ich brauche.

Die Lösung weiter gedacht

Damit kann also jeder Besucher einfach durch einen (doppel)klick einen Absatz direkt editieren. Für fett/kursiv/unterstrichen und Überschriften/Listen kann man einfach über API calls an den Browser Formatierungsbuttons anbieten.

Wozu brauche ich jetzt eignetlich noch ein Wiki? Wozu der roundtrip: Seite anzeigen → click auf edit button → Seiten quelltext als Wikisourc editieren → click auf save → speichern am server → neue seite rendern → neue version der Seite anzeigen wenn das jetzt viel einfacher geht:

Webseite anzeigen. Ein Paragraph ist als editierbar markiert (auch visuell, z.B. einfach durch andere hintergrundfarbe und/oder popup Hinweis onHover). Doppelklick. Text schreiben (nativ im Browser). Save Button klicken (save onBlur, wäre sogar auch möglich, finde ich aber persönlich übertrieben) Änderungen werden per AJAX im CMS Backend gespeichert. Fertig.

MMhh soll ich auf ein CMS umsteigen?

 
blog/html5_contenteditable.txt · Zuletzt geändert: 05.01.2013 13:43 von doogie
Recent changes RSS feed Driven by DokuWiki