jQuery.contentEditable is a light-weight WYSIWYG rich text editor plugin that uses contentEditable support in modern browsers for in-place HTML editing.

Initially developed for DraftEssay.com (which incidentally, this was written in), I have decided to open-source it to encourage development.

Example

Click on this text and type something. Press "Save Changes" to get the changed HTML of the editable areas.

Dependencies

jQuery ContentEditable depends on jQuery and shortcut.js for keyboard shortcuts, as given below.

Download

The source is hosted on BitBucket, which you can clone like so:

$ hg clone https://bitbucket.org/freshcode/jquery.contenteditable

Usage

This is a widget and can only be edited by hovering and looking for the orange bar
  1. Include jQuery 1.4 or higher.
  2. Include shortcut.js (included with package).
  3. Include jquery.contenteditable.js
  4. Link to jquery.contenteditable.css for toolbar styles

Some jQuery Calls:

  1. To initialise the toolbar, call $(".fresheditable").fresheditor();
  2. To start/stop editing, call $(".fresheditable").fresheditor("edit", true); for editable elements.
  3. To save, call $(".fresheditable").fresheditor("save", function(id, content) { ... }); to have the callback function called for each editable element being saved.

Keyboard Shortcuts