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:

CodeResult

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

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:

CodeResult

Try making some of this text bold...

Or an "Italic" Button...

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

CodeResult

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

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:

CodeResult

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

And here's the generated code:

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.

About the execCommand Method

The contenteditable attribute by itself is somewhat limited. Simply using this attribute by itself allows your users to replace your text with their own text, but not much else. However, as you can see with the above example, combining it with execCommand opens up a whole new range of possibilities.

So, what exactly is this execCommand?

execCommand is a JavaScript method that executes a command on the current document, current selection, or the given range. We reference this method by using document.execCommand();, while passing three parameters within the brackets. The first of these parameters is required, the other two are optional. The first parameter specifies the command identifier to execute (eg, "bold" or "italic"). The second parameter specifies whether to display a user interface. If specified, this parameter must be combined with the third parameter, which specifies the string, number, or other value to assign. These values depend on the command.

But Wait, Theres More!

But why stop there! The Bold and Italic buttons are just the beginning. There are command identifiers for practically any formatting option you'd need on a WYSIWYG editor.

Here are some of the more common elements/properties you can create buttons for:

You can see a full list of command identifiers on the Microsoft Website.

Enjoy this page?