Content Editable

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.

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

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