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.
*Does not support most of the html elements
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
Tags:
Contributors to this page:
Emads3,
Poteitow,
s9w,
stiegenaufgang,
mnoorenberghe,
Jeremie,
kscarfone,
Sheppy,
hoanganzglobal,
teoli,
fastclemmy,
ethertank,
bokepz10,
andrewpyszkowski,
chanchhaya14@gmail.com,
dante777,
ziyunfei,
flowdock,
lmorchard,
RAMilewski,
sailplaneTW,
Jesdisciple,
gurdiga,
Shz,
xaky
Last updated by:
Emads3,