Revision 967277 of Making content editable

Revision slug: Web/Guide/HTML/Content_Editable
Revision title: Content Editable
Revision id: 967277
Created: Dec 3, 2015, 2:43:47 AM
Creator: Emads3
Is current revision? No
Comment Technical review completed.

Tags:

Revision Content

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 {{DOMXRef("HTMLElement.contentEditable", "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.

Revision Source

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

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

<p>Content editable 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 of the html elements</p>
</div>

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

<p>Set the {{DOMXRef("HTMLElement.contentEditable", "contentEditable")}} attribute to <code>true</code> on your HTML element. It can be used in almost all HTML elements.</p>

<h2 id="Examples">Examples</h2>

<p>A simple example:</p>

<pre>&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;body&gt;
    &lt;div contentEditable="true"&gt;
      This text can be edited by the user.
    &lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt; </pre>

<p>You can see a working example with JavaScript integration using LocalStorage <a class="external" href="https://html5demos.com/contenteditable" title="https://html5demos.com/contenteditable">here</a>. With the source <a href="https://html5demos.com/contenteditable#view-source">here</a>.</p>

<h2 id="See_also">See also</h2>

<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>

<p><a href="/en/Midas" title="en/Midas">How to interact with the content </a> (old IE style API) and <a href="/en/Rich-Text_Editing_in_Mozilla" title="en/rich-text editing in mozilla">here</a></p>

Revert to this revision