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.
Try it yourself! I set the contenteditable attribute on the next paragraph:
Edit me! The attribute is inherited by all child nodes.
This is the corresponding HTML code:
<p contenteditable>
<span class="bold">Edit me!</span>
The attribute is inherited by all child nodes.
</p>
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 stands for “What You See Is What You Get” and describes editing formatted text while getting a live preview. This attribute can be used to build online rich text editors and may replace a <textarea/> element which only support plain text.
Inserting and posting DOM nodes requires JavaScript though. Use <textarea/> as a fallback, if your page supports browsers without JavaScript.
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 in browsers which are five years old.
Happy coding!