Closure: The Definitive Guide

Chapter 9. Rich Text Editor

Julie Parent

Browsers provide the basic primitives to allow your users to create and modify rich HTML content with only a few lines of JavaScript.  In all modern browsers, to make a <div> editable, you simply add the contentEditable attribute: <div contentEditable>. This transforms the <div> into a region that supports a blinking cursor and text input, along with copy and paste.  Browsers even provide functionality for performing basic editing commands, such as “bold the current selection,” via the execCommand API. However, different browsers support different commands, and even when they support the same command, they often have significant implementation differences. There is good documentation on the differences in execCommand at http://www.quirksmode.org/dom/execCommand.html.

In the previous chapter, we saw how to use goog.ui.Button to ensure cross-browser rendering consistency and extensibility over the basic browser provided <button> element. In this chapter, we’ll do the same for rich text editing to see how to use goog.editor to make editing behaviors more consistent across browsers and to make it easy to extend the browser built-in functionality.

The goog.editor package provides functionality to make something editable, utilities for working with editable regions, and many common extensions, known as plugins. The accompanying goog.ui.editor package contains common UI components like toolbars and dialogs. This chapter will show you how to embed an ...