This article is in need of a technical review.

In HTML5 any element can be editable. Using some JavaScript event handlers you can transform your web page into a full and fast rich-text editor. This article provides some information about this functionality.

Compatibility

Content editable is fully compatible with current browsers.

  • Firefox 3.5+
  • Firefox for Android 19+
  • Chrome 4.0+
  • Internet Explorer 5.5+ *
  • Safari 3.1+
  • Opera 9+
  • iOS Safari 5.0+
  • Android Browser 3.0+
  • Opera Mobile 12.1+
  • Chrome for Android 25+

Not yet supported by Opera Mini.

*Does not support most of the html elements

How does it work?

Set the contentEditable attribute to true on 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.

See also

user_pref("capability.policy.policynames", "allowclipboard");
user_pref("capability.policy.allowclipboard.sites", "https://www.mozilla.org");
user_pref("capability.policy.allowclipboard.Clipboard.cutcopy", "allAccess");
user_pref("capability.policy.allowclipboard.Clipboard.paste", "allAccess");

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