contentEditable jQuery Plugin
less than 1 minute to read

This plug-in makes any DOM content editable and displays a Save button underneath the content. 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.

jQuery.fn.contentEditable = function(options)

Options

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

javascript
var def = { editClass: null, saveText: "Save", saveHandler: 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.

saveHandler
Event handler when the Save button is clicked.

Example

javascript
$("#divMessage").contentEditable( 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 });

Class Members

See also:

Class contentEditable

© West Wind Technologies, 1996-2024 • Updated: 12/19/15
Comment or report problem with topic