Revision 1058340 of Making content editable

<p><span class="seoSummary">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.</span></p>

<h2 id="Compatibility">Compatibility</h2>

<p>The {{htmlattrxref("contenteditable")}} attribute is fully compatible with current browsers.</p>

<ul>
 <li>Firefox 3.5+</li>
 <li>Firefox for Android 19+</li>
 <li>Chrome 4.0+</li>
 <li>Internet Explorer 5.5+ *</li>
 <li>Safari 3.1+</li>
 <li>Opera 9+</li>
 <li>iOS Safari 5.0+</li>
 <li>Android Browser 3.0+</li>
 <li>Opera Mobile 12.1+</li>
 <li>Chrome for Android 25+</li>
</ul>

<p>Not yet supported by Opera Mini.</p>

<div class="note">
<p>* Does not support most HTML elements</p>
</div>

<h2 id="How_does_it_work">How does it work?</h2>

<p>All you have to do is set the {{htmlattrxref("contenteditable")}} attribute on nearly any HTML element to make it editable.</p>

<h2 id="Simple_example">Simple example</h2>

<p>Here's a simple example which creates a {{domxref("div")}} element whose contents the user can edit.</p>

<pre>
&lt;div contenteditable="true"&gt;
  This text can be edited by the user.
&lt;/div&gt;</pre>

<p>Here's the above HTML in action:</p>

<p>{{ EmbedLiveSample('Simple Example') }}</p>

<h2>Security</h2>

<p>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 <code>about:config</code>:</p>

<pre class="code">
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");</pre>

<h2>See also</h2>

<ul>
 <li><a href="/en-US/docs/Mozilla/Projects/Midas">Midas</a> (the scriptable text editor component)</li>
 <li><a href="/en-US/docs/Rich-Text_Editing_in_Mozilla">Rich text editing in Mozilla</a></li>
 <li>A more complex example <a href="https://html5demos.com/contenteditable">can be found on html5demos.com</a>; the <a href="https://html5demos.com/contenteditable#view-source">source is also available</a></li>
</ul>