Demo of Content Editable

Content Editable is an HTML 5 attribute that allows the node its set on to be manipulated in the browser. You set it to true and then that node and its children become editable. Like many HTML 5 features, its still new and adoption is limited with implementation inconsistencies from browser to browser.

Below is a demo of a few ways it can be used - use the demo by reviewing the html for each try, then clicking inside the dashed box and typing something. Type, delete, hit enter, shift+enter, whatever. When you're ready, click outside that dashed box (or tab away) and the solid box will reflect your changes.

From my write-up on Playing Around with Content Editable in Rails.

Try 1: add contenteditable to a <p> tag, like this:

<p id="try_1" class="try" contenteditable="true">Note content here!</p>

Note content here!

Result: Hitting enter creates <div> tags inside the <p> tag and hitting shift+enter creates a <br />.

Try 2: wrap a <section> tag around a <p> tag, like this:

<section id="try_2" class="try" contenteditable="true">
  <p>Note content here!</p>
</section>

Note content here!

Result: Hitting enter creates <p> tags inside the <p> tag and hitting shift+enter creates a <br />.

Try 3: use a <ul> tag, like this:

<ul id="try_3" class="try" contenteditable="true">
  <li>Note content here!</li>
</ul>

Result: Hitting enter creates <li> tags inside the <ul> tag and hitting shift+enter creates a <br /> inside the <li>.

I've got some thoughts about what's good about this attribute and what I don't like about it on my blog post about Playing Around with Content Editable in Rails.

Bonus: try dragging the following image into one of the dashed boxes.