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 on 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
Document Tags and Contributors
Contributors to this page: lmorchard, andrewpyszkowski, kscarfone, Jeremie, chanchhaya14@gmail.com, dante777, RAMilewski, ziyunfei, xaky, Jesdisciple, sailplaneTW, Sheppy, hoanganzglobal, Shz, mzakes, teoli, bokepz10, fastclemmy, gurdiga, ethertank, mnoorenberghe, flowdock
Last updated by:
mnoorenberghe,