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".
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.
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:
<div contenteditable> Try editing this content... go on... select me with your cursor then write over the top of me! </div>
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
Add a "Bold" Button:
You can use
document.execCommand(); to format your text. In this example, we add a "Bold" button:
<button onclick="document.execCommand('bold',false,null);">Bold</button> <div contenteditable> Try making some of this text bold... </div>
Or an "Italic" Button...
Italics work the same way. Simply copy your Bold button, then replace the words "bold" with "italic":
<button onclick="document.execCommand('bold',false,null);">Bold</button> <button onclick="document.execCommand('italic',false,null);">Italic</button> <div contenteditable> Try making some of this text bold or even italic... </div>
Generate the HTML Code
When you use the
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:
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
<em> tags respectively. Firefox on the other hand, generates the appropriate CSS code (ie,
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.
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
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
- Ordered/unordered lists
- Scrolling marquees
- Horizontal rules
- Text alignment
- And more...
You can see a full list of command identifiers on the Microsoft Website.