(^480) ❘ CHAPTER 22 CREATING A SIMPLE WYSIWYG EDITOR
One caveat of storing and restoring selection information is that the process can be a bit fragile; in
particular, the bound node information is stored. If the element content is changed, that information
could become invalid, even if the content is reset to the exact same state.
SUMMARY
In this chapter, you created a simple WYSIWYG editor in the browser. Along the way, you learned
about the powerful HTML5 contenteditable attribute, which can make nearly any DOM ele-
ment editable. You learned to use the document.execCommand function for processing the formatting
options within your editor.
You learned some of the structure of the current browser selection model and created Range objects
programmatically. Although you might not have created the next giant of word processing software,
you created a stable code base for additional exploration.
EXERCISES
- Which HTML5 attribute is the basis for most modern web-based WYSIWYG editors?
- Which JavaScript command asks the browser to perform actions using native functionality?
- Name two options that require additional information when passed to the command described
in Exercise 2. - Describe the structure in which most browsers store information about currently selected
content. - Which jQuery method provides access to HTML5 data attributes?