Initial

README.md

@@ -1,2 +1,19 @@
 # jquery-html-editable
 A tiny jquery replacement for contenteditable
+
+### Whay another one?
+This one will work with jquery.on. Just define a #container and the css-selector for editable elements (default: div.html_editable).
+On click it will create a textarea.
+On blur it will remove the textarea and update the text.
+### Usage
+
+     $('#container').html_editable(); // 'div.html-editable' elements in '#container'
+     $('#container').html_editable('p.edit'); //all 'p.edit' elements in '#container'editable
+     $('#container').html_editable('div.admin p.edit'); //only if some parent div has class admin 
+
+### Todo
+some autogrow feature for the texterea would be nice...
+
+### Thanks
+http://stackoverflow.com/a/2441686/1385546
+

jquery_html_editable.js

@@ -0,0 +1,27 @@
+(function ( $ ) {
+  'use strict';
+  $.fn.html_editable = function( target ) {
+    target = target || 'div.html_editable';
+    this.on('click',target, function() { //hide $el, show $texterea (mark with a class - just in case)
+      var $el = $(this).hide();
+      var $textarea = $('<textarea>').addClass('html_editable_').text($el.text());
+      $el.after($textarea);
+      $textarea.css({minHeight: $textarea[0].rows+1+'em', overflow:'hidden'}).focus();
+    });
+    this.on('blur',target + ' + textarea.html_editable_', function() { //on blur write everything back
+      var $textarea = $(this);
+      var text = $textarea.val()
+        .replace(/&/g, '&amp;')
+				.replace(/"/g, '&quot;')
+				.replace(/'/g, '&#39;')
+				.replace(/</g, '&lt;')
+				.replace(/>/g, '&gt;')
+				.replace(/ /g, '&nbsp;')
+				.replace(/\n/g, '<br>');
+      var $el = $textarea.prev();
+      $el.html(text).show();
+      $textarea.remove();
+    });
+    return this;
+  };
+}( jQuery ));