Edit Any Element In Place - jQuery Editable

File Size: 11.5 KB
Views Total: 8196
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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.


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


  // 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


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

// close the editable mode

// destroy the plugin

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