One of the many UI widgets included in the Closure Library is a full-featured rich text editor.

All modern browsers have rich text editing functionality built in — unfortunately this functionality is at best inconsistent and, at worst, broken. Closure Library’s editor is a sub-project within Closure. It provides a common, powerful, and extensible interface that abstracts the cross-browser inconsistencies and shortcomings of rich text editing.

We use the Closure editor in Gmail, Google Sites, Google Groups, and many other Google products. We’re very happy to be able to share this editor with you as part of the Closure Library.

Using the editor in your project

A demo of the basic editor functionality is included in the source distribution, and can be tried here.

The most important code is as follows. First, we create an editable field and attach it to an element with the id editMe.

// Create an editable field.
var myField = new goog.editor.Field('editMe');

Next, we register editing plugins. The rich text editor uses a plugin-based architecture in order to support many products with different feature sets. For example, in Gmail, the tab key moves the cursor to the send button, while in Google Sites it either adds 4 spaces or indents the current bulleted list. Plugins allow us to create modular features for the Editor and let each application pick and choose which ones they need or want. This ensures each application only brings in the code it needs, helping to minimize code size and latency.

// Create and register all of the editing plugins you want to use.
myField.registerPlugin(new goog.editor.plugins.BasicTextFormatter());
myField.registerPlugin(new goog.editor.plugins.RemoveFormatting());
myField.registerPlugin(new goog.editor.plugins.UndoRedo());
myField.registerPlugin(new goog.editor.plugins.ListTabHandler());
myField.registerPlugin(new goog.editor.plugins.SpacesTabHandler());
myField.registerPlugin(new goog.editor.plugins.EnterHandler());
myField.registerPlugin(new goog.editor.plugins.HeaderFormatter());
myField.registerPlugin(
    new goog.editor.plugins.LoremIpsum('Click here to edit'));
myField.registerPlugin(
    new goog.editor.plugins.LinkDialogPlugin());

In a future post, we’ll discuss how you can use the plugin system to add your own custom functionality to your editor.

Next we set up our toolbar:

// Specify the buttons to add to the toolbar, using built in default buttons.
var buttons = [
  goog.editor.Command.BOLD,
  goog.editor.Command.ITALIC,
  goog.editor.Command.UNDERLINE,
  goog.editor.Command.FONT_COLOR,
  goog.editor.Command.BACKGROUND_COLOR,
  goog.editor.Command.FONT_FACE,
  goog.editor.Command.FONT_SIZE,
  goog.editor.Command.LINK,
  goog.editor.Command.UNDO,
  goog.editor.Command.REDO,
  goog.editor.Command.UNORDERED_LIST,
  goog.editor.Command.ORDERED_LIST,
  goog.editor.Command.INDENT,
  goog.editor.Command.OUTDENT,
  goog.editor.Command.JUSTIFY_LEFT,
  goog.editor.Command.JUSTIFY_CENTER,
  goog.editor.Command.JUSTIFY_RIGHT,
  goog.editor.Command.SUBSCRIPT,
  goog.editor.Command.SUPERSCRIPT,
  goog.editor.Command.STRIKE_THROUGH,
  goog.editor.Command.REMOVE_FORMAT
];
var myToolbar = goog.ui.editor.DefaultToolbar.makeToolbar(buttons,
    goog.dom.getElement('toolbar'));
 
// Hook the toolbar into the field.
var myToolbarController =
    new goog.ui.editor.ToolbarController(myField, myToolbar);

And finally, we turn on editing:

myField.makeEditable();

When we open the file in the browser, we get an HTML editor:



Let us know in the comments if you’ve used or plan to use the Closure Library rich text editor in your project. If you have questions, please post them to the discussion group.

Posted by Robby Walker, Software Engineer

I would like to thank everyone who stuck around the booth area for my whiteboard presentation on Closure Compiler last week. It was fun meeting all the developers who share the same passion for making fast and awesome web applications! I hope everyone would continue to find Closure Compiler useful in speeding up your applications.

For those who did not get a chance to attend the conference, I wanted to share the slides with you:



Thanks again, and if you have questions, please drop us a note on the Closure Compiler discussion list.

Alan Leung, Software Engineer, Closure Compiler team