Introduction

In HTML5 any element can be editable. This feature was introduced a long time ago, but has now been standardized by WHATWG (html current spec). With some JavaScript event handlers you can transform your web page into a full and fast rich-text editor.

Compatibility

Content editable is fully compatible with current desktop browsers.  It is not yet supported by most mobile browsers with the exception of Firefox Mobile. (confirmation needed)

• Firefox 3.5+
• Chrome 6.0+
• Internet Explorer 6.0+
• Safari 3.2+
• Opera 8+

Not yet supported by iOS Safari, Opera Mini, Opera Mobile, Android Browser.

How Does It work?

Set the contenteditable attribute to true in your HTML element. It can be used in almost all HTML elements.

Examples

A simple example:

<!DOCTYPE html>
<html>
  <body>
    <div contenteditable="true">
      This text can be edited by the user.
    </div>
  </body>
</html> 

You can see a working example with JavaScript integration using LocalStorage here. With the source here [1]

See also

How to interact with the content  (old IE style API) and here