mozilla

Revision 43742 of Content Editable

  • Revision slug: HTML/Content_Editable
  • Revision title: Content Editable
  • Revision id: 43742
  • Created:
  • Creator: RAMilewski
  • Is current revision? No
  • Comment Reverted to earlier version; 113 words added, 50 words removed

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 desktop browsers.  It is not yet supported by most mobile browsers with the exception of Firefox Mobile. (confirmation needed)

  • Firefox 3.5+
  • Chrome 6.0+
  • Internet Explorer 6.0+
  • Safari 3.2+
  • Opera 8+

Not yet supported by iOS Safari, Opera Mini, Opera Mobile, Android Browser.

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

How to interact with the content  (old IE style API) and here

{{ languages( { "pl": "pl/HTML/Element/br", "fr": "en/HTML/Element/br" } ) }}

Revision Source

<h3>Introduction</h3>
<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>
<h3>Compatibility</h3>
<p>Content editable is fully compatible with current desktop browsers.  It is not yet supported by most mobile browsers with the exception of Firefox Mobile. (confirmation needed)</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>
</ul>
<p>Not yet supported by iOS Safari, Opera Mini, Opera Mobile, Android Browser.</p>
<h3>How Does It work?</h3>
<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>
<h3>Examples</h3>
<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 <a class=" external" href="http://html5demos.com/contenteditable#view-source" title="http://html5demos.com/contenteditable#view-source"></a></p><a class=" external" href="http://html5demos.com/contenteditable#view-source" title="http://html5demos.com/contenteditable#view-source">
<h3>See also</h3>
</a><p><a class=" external" href="http://html5demos.com/contenteditable#view-source" title="http://html5demos.com/contenteditable#view-source"></a><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>
<p>{{ languages( { "pl": "pl/HTML/Element/br", "fr": "en/HTML/Element/br" } ) }}</p>
Revert to this revision