Chapter 22Creating 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 modified the innerHTML of DOM elements when formatting 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 find 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.
Start with an HTML example of the attribute (Example 22-1.html):
<!DOCTYPE HTML>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='content-type'
content='application/xhtml+xml; charset=utf-8' />
<meta http-equiv='content-language' content='en-us' />
<meta charset='utf-8' />
<title> ...Get Web Development with jQuery now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
