Revision 464761 of Content Editable

  • Revision slug: Web/Guide/HTML/Content_Editable
  • Revision title: Content Editable
  • Revision id: 464761
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment Compatibility based on http://caniuse.com/contenteditableWeb/HTML/Content_Editable Web/Guide/HTML/Content_Editable

Revision Content

Introduction

In HTML5 any element can be editable. This feature was introduced a long time ago, but has now been standardized by WHATWG (html current spec). With some JavaScript event handlers you can transform your web page into a full and fast rich-text editor.

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

{{ languages({ "ja": "ja/HTML/Content_Editable", "zh-cn": "zh-cn/HTML/Content_Editable" }) }}

Revision Source

<h2 id="Introduction">Introduction</h2>
<p>In HTML5 any element can be editable. This feature was introduced a long time ago, but has now been standardized by <a class="external" href="http://www.whatwg.org/" title="http://www.whatwg.org/">WHATWG</a> (<a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/editing.html#contenteditable" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/editing.html#contenteditable">html current spec</a>). With some JavaScript event handlers you can transform your web page into a full and fast rich-text editor.</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>
<h2 id="How_Does_It_work.3F">How Does It work?</h2>
<p>Set the <code>contenteditable</code> attribute to <code>true</code> in 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;
&nbsp; &lt;body&gt;
 &nbsp;&nbsp; &lt;div contenteditable="true"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; This text can be edited by the user.
&nbsp;&nbsp;&nbsp; &lt;/div&gt;
&nbsp; &lt;/body&gt;
&lt;/html&gt; </pre>
<p>You can see a working example with JavaScript integration using LocalStorage <a class="external" href="http://html5demos.com/contenteditable" title="http://html5demos.com/contenteditable">here</a>. With the source here</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&nbsp;</a> (old IE style API) and <a href="/en/Rich-Text_Editing_in_Mozilla" title="en/rich-text editing in mozilla">here</a></p>
<div>
  {{ languages({ "ja": "ja/HTML/Content_Editable", "zh-cn": "zh-cn/HTML/Content_Editable" }) }}</div>
Revert to this revision