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:
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.
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).
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).