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