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:
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:
Or an "Italic" Button...
Italics work the same way. Simply copy your Bold button, then replace the words "bold" with "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:
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, There's 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:
- Foreground color
- Background color
- Inline Frames
- Form elements
- Hyperlinks
- Ordered/unordered lists
- Copy
- Paste
- Images
- Scrolling marquees
- Refresh
- Horizontal rules
- Drag/drop
- Text alignment
- And more...
You can see a full list of command identifiers on the Microsoft Website.