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.
Compatibility
The {{htmlattrxref("contenteditable")}} attribute 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 HTML elements
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 {{domxref("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