Just today I learned about the contenteditable attribute in HTML5 and it truly amazes me what can be done with it. When set the visitors of your web page can edit any text within the node. It is a global attribute so it can be applied to any HTML element.

And just so you can experience it first hand I set the contenteditable attribute on the next paragraph:

The text within this tag can be edited. It also applies to all children nodes.

Have a look at the HTML:

<p contenteditable>
  The text within this tag can be edited.
  <span class="red">It also applies to children nodes.</span>

Of course, child nodes can overwrite the value explicitly and be non-editable inside an editable parent. This can be done by setting contenteditable="false" in the child node.

Start your own WYSIWYG editor

The term WYSIWYG - for anyone who’s not familiar with it - stands for “What You See Is What You Get” and describes editing formatted text while getting a live preview. As an alternative to the <textarea/> element this attribute can be used to build online rich text editors.

Inserting and posting DOM nodes would require JavaScript though. Or is there a way to send part of the DOM as part of a form? I’ll investigate if there is such an option to keep all JavaScript optional.

My test editor

The following editor offers buttons to insert headlines. If you select some characters these will become the content of the new headline. One thing you’ll have to watch out when developing with Ranges is that they can span over multiple nodes. They can even start and end in different nodes which makes it super complicated to wrap the selection into a new node. Be sure to describe the excepted behaviour before coding a quick & dirty usability monster (like my demonstration on this page).

This is a text editor with buttons to create headlines (if you accept JavaScript).

Check out the MDN page on contenteditable to learn more about the specification. It has been supported by all major browsers for quite a while so I consider it safe to use. The Can I use… page of this attribute promises excellent support for browsers from the stone age (older than 5 years).

Happy coding!