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 {{htmlattrxref("contenteditable")}} attribute on nearly any HTML element to make it editable.
Simple example
Here's a simple example which creates a {{HTMLElement("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:
{{ EmbedLiveSample('Simple_example') }}
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