Creating a Simple WYSIWYG
Editor
Many web-based WYSIWYG (what-you-see-is-what-you-get) editors have risen in popularity
only to be later supplanted by editors with better interfaces or more features. Some of these
editors used <textarea> elements or modifi ed the innerHTML of DOM elements when format-
ting features were used.In this chapter you learn an attribute that changed the face of web-based editors and how you
can use it with jQuery to create a simple WYSIWYG editor in a few steps.MAKING AN ELEMENT EDITABLE WITH THE
CONTENTEDITABLE ATTRIBUTE
Although those comfortable with HTML editors can fi nd it easy to be underwhelmed
by the HTML5 contenteditable attribute, its impact should not be underestimated. It
is another intuitive feature; when added to a DOM element, the content of that element
becomes editable by the user directly in the browser. If you’ve ever used a settings page
to perform an action such as changing the text of a button you commonly use, imagine
instead toggling your web application to editable and then typing the text directly on the
button. This is the type of feature that becomes not only possible but also easy with the
contenteditable attribute.