Edit Any Element In Place - jQuery Editable

Editable is a simple, touch-friendly inline editing jQuery plugin which converts any valid html elements into an editable area (based on textarea) when double clicking/tapping on it.

How to use it:

1. Load the minified version of the jQuery Editable plugin after jQuery library and we're ready to go.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.editable.min.js"></script>

2. Call the function on the target element to be editable on double click.

$('#element').editable(); 

3. To config the plugin, just pass the following options as an object to the editable() function:

$('#element').editable({

  // trigger event
  event : 'dblclick',

  // enables touch event
  touch : true,

  // converts \n to <br />
  lineBreaks : true,

  // allows to change font size
  toggleFontSize : true,

  // close on enter
  closeOnEnter : false,

  // message to show when empty
  emptyMessage : false,

  // integrates with tinyMCE
  tinyMCE : false,

  // additional editor styles
  editorStyle : {},

  // callback function
  callback : function( data ) {
    if( data.content ) {
        // Content has changed...
    }
    if( data.fontSize ) {
        // the font size has changed
    }

    // data.$el gives you a reference to the element that was edited
    data.$el.effect('blink');
    }

}); 

4. Determine whether the element is editable/editing or not:

var $el = $('#element');

if( $el.is(':editing') ) {
  // is editing
}

if( $elem.is(':editable') ) {
  // is editable
}

$('#element').on('edit', function(event, $editor) { 
  // triggered when the element gets edited
}); 

5. API methods.

// enter the editable mode
$('#element').editable('open');

// close the editable mode
$('#element').editable('close');

// destroy the plugin
$('#element').editable('destroy');

---

This awesome jQuery plugin is developed by victorjonsson. For more Advanced Usages, please check the demo page or visit the official website.