Contenteditable

You may be familiar with content management systems or blog builders that enable inline editing of your content. These are the systems where, you can start editing a page simply by clicking anywhere you like in the page. With these "WYSIWYG" editors, clicking the content makes it "editable".
Typically, online editors and content management systems have required some pretty complex JavaScript programming to get things working as a WYSIWYG editor. But with HTML5's introduction of the contenteditable global attribute, creating a WYSIWYG editor could be much simpler.

Actually, I should mention that the contenteditable attribute has been supported by most major browsers for quite some time. And now it looks like it will be included in the HTML5 specification (which is currently in draft status at the time of writing).
Anyway, let's look at how the contenteditable attribute works.

Example contenteditable Code:

You might be suprised at how easy it is to create "editable" content. At its simplest, all you do is add the contenteditable attribute to any tag. Like this:

Try editing this content... go on... select me with your cursor then write over the top of me!

HTML Code:
<div contenteditable><br /> Try editing this content... go on... select me with your cursor then write over the top of me!<br /> </div><br />

The contenteditable attribute accepts either the empty string, or a "true" or "false" value. If you can't edit the above text, your browser might not support the contenteditable attribute.

Add a "Bold" Button:

You can use document.execCommand(); to format your text. In this example, we add a "Bold" button:

Try making some of this text bold...

HTML Code:

<button onclick="document.execCommand('bold',false,null);">Bold</button><br /> <div contenteditable><br /> Try making some of this text bold...<br /> </div><br />

Or an "Italic" Button...

Italics work the same way. Simply copy your Bold button, then replace the words "bold" with "italic":

Try making some of this text bold or even italic...

HTML Code:

<button onclick="document.execCommand('bold',false,null);">Bold</button><br /> <button onclick="document.execCommand('italic',false,null);">Italic</button><br /> <div contenteditable><br /> Try making some of this text bold or even italic...<br /> </div><br />

Generate the HTML Code

When you use the contenteditable attribute, each time you change the content, the browser automatically generates the HTML code behind the scenes. You can use JavaScript to return this generated HTML. More specifically, you can use getElementById, textContent, and innerHTML to return this HTML code.

Using this generated HTML, you could display an "HTML View" as well as the "WYSIWYG View". A full-blown WYSIWYG HTML editor would typically allow the user to save the generated content back to a database. For the purposes of this tutorial, we won't be doing that (although, this is a relatively straightforward task if you have a database and you know your SQL).
Here's an example of displaying the generated code:

Try making some of this text bold or even italic...

And here's the generated code:

HTML Code:
<script type="text/javascript"><br /> function displayHtml() {<br /> HTMLCode = document.getElementById('source').innerHTML;<br /> document.getElementById('display').textContent = HTMLCode;<br /> return HTMLCode;<br /> }<br /> </script><br /> <div onclick="displayHtml();"><br /> <button onclick="document.execCommand('bold',false,null);">Bold</button><br /> <button onclick="document.execCommand('italic',false,null);">Italic</button><br /> <div contenteditable id="source" onkeyup="JavaScript:displayHtml();"><br /> Try making some of this text bold or even italic...<br /> </div><br /> </div><br /> <p>HTML output:</p><br /> <textarea class="example-code" id="display"></textarea><br /> <p style="font-size:10px;"><a href="http://www.quackit.com/html/codes/contenteditable.cfm">Contenteditable</a></p><br />

Note that the actual HTML code generated by the browser may be different, depending on which browser you use. For example, Google Chrome and Apple Safari generate <b> tags for bold text and <i> tags for italic text. Opera generates <strong> and <em> tags respectively. Firefox on the other hand, generates the appropriate CSS code (ie, font-weight and font-style)

According to the HTML5 specification, browsers should actually generate <b> tags for bold text and <i> tags for italic text, unless it knows that the bold text has higher importance and the italic text should be emphasized.