This plug-in makes any DOM element editable as a textbox with a save button beneath it. A saveHandler can be specified that is fired when the Save button is clicked. You can press ESC while in the editable area to abort editing without firing the SaveHandler.

Options

The options parameter can be a map of any of these properties (default values are shown):

var def = { editClass: null,
        saveText: "Save",
        editMode: "text",  // html
        saveHandler: null,
        value: null
    };

editClass
The CSS class for the edited element. Optional. If not specified an Azure background is used.

saveText
The text of the save button. "Save" by default. The Save button also assigns an implicit class="editableButton" to allow you to override styling of the button.

editMode
Determines whether the text is read and written as plain text, or as HTML. HTML offers the ability for formatting that isn't stripped.

saveHandler
Event handler when the Save button is clicked.

value
The initial value that is to be edited. By default this will be the content (text or html) of the element edited but when value is specified it's overridden.

Named Parameter: cleanup
This named parameter option cleans up an editbox and save button and redisplays the original content. This is equivalent to pressing the ESC key and aborting the edited content.

$("#divContent").editable("cleanup");

Example

$("#divMessage").editable( 
           saveText: "Update Comment",
           editClass: "contenteditable",  // css class for edited text
      saveHandler: function(e) {
                 // this is content element edited
         alert( $(this).html() );  // or use .text()
                  return true;   // true to stop editing, false to keep editing
           });