Content Editable

  • Revision slug: Web/HTML/Content_Editable
  • Revision title: Content Editable
  • Revision id: 404819
  • Created:
  • Creator: ethertank
  • Is current revision? No
  • Comment Moved From HTML/Content_Editable to Web/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+
  • Chrome 6.0+
  • Internet Explorer 6.0+
  • Safari 3.2+
  • Opera 8+
  • iOS Safari 5.0+
  • Android Browser 3.0+

Not yet supported by Opera Mini, Opera Mobile.

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>Chrome 6.0+</li>
  <li>Internet Explorer 6.0+</li>
  <li>Safari 3.2+</li>
  <li>Opera 8+</li>
  <li>iOS Safari 5.0+</li>
  <li>Android Browser 3.0+</li>
</ul>
<p>Not yet supported by Opera Mini, Opera Mobile.</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;
  &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="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 </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