Chapter 9. Rich Text Editor
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 ...
Get Closure: The Definitive Guide 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.