Making content editable

In HTML, any element can be editable. By 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.

How does it work?

All you have to do is set the contenteditable attribute on nearly any HTML element to make it editable.

Simple example

Here's a simple example which creates a <div> element whose contents the user can edit.

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

Here's the above HTML in action:

Security

For security reasons, Firefox doesn't let JavaScript code use clipboard related features (copy, paste, etc.) by default. You can enable them by setting the preferences shown below using about:config:

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");

See also

• Midas (the scriptable text editor component)
• Rich text editing in Mozilla
• A more complex example can be found on html5demos.com; the source is also available