Section 14.5. Rich Text Editor

14.5. Rich Text Editor

Editor, Formatting, Fonts, Rich, Text, Textarea, Toolbar, Write, WordProcessor, WYSIWYG

Figure 14-14. Rich Text Editor

14.5.1. Goal Story

Pam is working on a presentation for the steering committee; style will count here. From the toolbar, she sets the font to Arial, the size to 24 pt, and switches italics on. She then types out the heading, selects it, and moves to the toolbar again to set the color scheme.

14.5.2. Problem

How can users create and maintain rich content?

14.5.3. Forces

• Many Ajax Apps let users create and edit substantial chunks of content.

• Rich content for the Web needs to make the most of HTML and go well beyond a string of plain-text.

• Most users don't know HTML; even "easy" markup substitutes for HTML are complicated and inconsistent.

14.5.4. Solution

Incorporate a Rich Text Editor widget with easy formatting and WYSIWYG^[*] display. Typically, the widget looks like a mini word processor: a toolbar on top with a rich editing area underneath. The editing area is usually a div rather than a textarea, meaning that any HTML content is possible.

^[*] "What You See Is What You Get" (WYSIWYG) interfaces are a staple of windows-based apps, where the editing interface is essentially the same as the output (i.e., a printout or a presentation).

Typical features include:

• Flexible font styles, sizes, boldfacing, etc.

• Flexible color schemes

• Embedded images

• Embedded tables

• Bullet-point and numeric lists

• Indenting and flexible text alignment

All of these features are usually accessible by the toolbar, as well as via keyboard shortcuts. It would also be possible to make them available from drop-down menus, though the main examples to date have avoided doing so. In addition, the toolbar sometimes offers other operations too:

• Undo, Redo

• Cut, Paste, Copy

• Save (Explicit Submission [Chapter 10])

• Spellcheck

Rich Text Editors are a great tool for nontechnical users, but as with GUI word processors, they can slow down power users. If power users are important to you, a few guidelines apply:

• Offer an alternative "WYSIWYN" (What You See Is What You Need) interface, where the user can enter raw HTML and/or some other text-based markup such as Markdown (http://daringfireball.net/projects/markdown/).

• Offer keyboard shortcuts and advertise them well, e.g., as tooltip Popups (Chapter 15) on the corresponding toolbar icons.

• Offer personalized toolbars and keyboard bindings.

The major browsers do have some support for rich text editing. Firefox has Midas (http://kb.mozillazine.org/Firefox_:_Midas), an embedded text editor, and IE (http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/contenteditable.asp) has a similar editor available on items flagged as contentEditable. However, neither mechanism is portable, and with both versions, you're stuck with whatever version the user's browser has. For that reason, the best solution right now is probably the Cross-Browser Component (Chapter 12) libraries mentioned in the following "Real-World Examples."

14.5.5. Real-World Examples

14.5.5.1. FCKEditor library

Frederico Caldeira Knabben's FCKEditor (http://www.fckeditor.net/) is a feature-rich, open source Cross-Browser Component you can pull into your own projects (Figure 14-15). It also has some server-side integration and web remoting support.

Figure 14-15. FCKEditor

14.5.5.2. Jotspot, Dojo Rich Text Editor

Jotspot is a wiki host that allows editing in three formats: WYSIWYG, markup, or XML (i.e., the underlying XHTML). The WYSIWYG supports all the Rich Text Editor capabilities mentioned in the previous Solution, and is based on the open source Dojo Rich Text Editor component (http://dojotoolkit.org/docs/rich_text.html). (See Figure 14-16.) In the simplest case, using the component is as simple as declaring a div with the right class.

  <div > Initial             content </div> 

Figure 14-16. Jotspot Dojo Editor

14.5.5.3. Writely

Writely (http://writely.com) promotes itself as "The Web Word Processor." It edits content using a mechanism similar to that used by Jotspot. One nice feature is a spell-check.

14.5.5.4. Wikipedia

Wikipedia's (http://Wikipedia.org) editing interface is characteristic of slightly older editors that offer a rich editing toolbar but only a markup-based textarea mechanism for the content (Figure 14-17). This is also true of the open source MediaWiki framework (http://mediawiki.org) on which Wikipedia is based.

Figure 14-17. Wikipedia editor

14.5.5.5. Rich Text Editor

Kevin Roth's Rich Text Editor (http://www.kevinroth.com/rte/demo.htm) is a good demo of the native browser support mentioned in the preceding "Solution" because it provides an editor built on top of whichever browser it's running in.

14.5.6. Code Example: FCKEditor

This example introduces the FCKEditor API and looks at some of the internals. To use FCKEditor in your own project, first create a regular textarea:

   <textarea ></textarea> 

FCKEditor can then replace the text editor with a rich editor:

   var commentsEditor = new FCKeditor("comments");   commentsEditor.ReplaceTextarea(    ); 

To track usage, register an initialization handler for the global FCKEditor module, which applies to all editor instances. Here you probably want to set up an event handler that will fire when a user changes an individual editor. See the API documentation (http://wiki.fckeditor.net/) for more details and options.

     function FCKeditor_OnComplete(editor) {       editor.Events.AttachEvent('OnSelectionChange', onEditorChange);     }     function onEditorChange(editor) {       // Respond to change.       // You can get the editor contents with editor.GetXHTML( );     } 

Now the internals. ReplaceTextarea will locate the textarea object, hide it, then insert the Rich Text Editor content just above it.

   FCKeditor.prototype.ReplaceTextarea = function( )     ...     var oTextarea = document.getElementById( this.InstanceName ) ;     oTextarea.style.display = 'none' ;     ...     this._InsertHtmlBefore( this._GetIFrameHtml( ), oTextarea ) ; 

_GetIFrameHtml( ) outputs the HTML for the editor IFrame, and its source is fckeditor.html. The editor is structured as a three-row table. The top row is the toolbar (and some other controls for expanding and collapsing it); the second row is the WYWIWYG editing area, backed by an IFrame; the third row shows the HTML source, which is usually invisible.

   <table height="100%" width="100%" cellpadding="0" cellspacing="0"           border="0" style="TABLE-LAYOUT: fixed">     <tr>       ...       <td   unselectable="on"></td>       ...     </tr>     <tr >       <td  height="100%" valign="top">         <iframe  name="eEditorArea" height="100%" width="100%"                 frameborder="no" src="/books/2/755/1/html/2/fckblank.html"></iframe>       </td>     </tr>     <tr  style="DISPLAY: none">       <td  height="100%" valign="top">         <textarea  dir="ltr" style="WIDTH: 100%; HEIGHT: 100%">              </textarea>       </td>     </tr>   </table> 

The toolbar consists of toolbar buttons linked to commands. The commands follow the Command pattern (Gamma et al., 1995)they are objects encapsulating a command and can be launched from the toolbar or with a keyboard shortcut. The command is identified in each toolbar button declaration as well as several display properties.

  var FCKToolbarButton = function (commandName,   label, tooltip, style, sourceView, contextSensitive) 

For example, here's the toolbar button to paste plain-text:

  oItem = new FCKToolbarButton('PasteText',   FCKLang.PasteText, null, null, false, true); 

The PasteText command in the preceding example is ultimately tied to a Command object that will launch a Paste Text dialog.

  FCK.PasteAsPlainText=function( ) {     FCKDialog.OpenDialog('FCKDialog_Paste',FCKLang.PasteAsText,     'dialog/fck_paste.html',400,330,'PlainText'); } 

Manipulations of the WYSIWYG editor content involve getting hold of the content element and simply altering its HTML. In the case of the Paste operation, it appends the new HTML, sHtml, at the right place.

   var oEditor = window.parent.InnerDialogLoaded( ) ;   ...   oEditor.FCK.InsertHtml(sHtml) ; 

14.5.7. Related Patterns

14.5.7.1. Virtual Workspace

For editing large chunks of text, you might want to experiment with a Virtual Workspace (Chapter 15).

14.5.7.2. Progress Indicator

Provide a Progress Indicator (see earlier) while saving text. Indeed, many text editors take a while to start up as well, partly due to scripting overhead and partly due to toolbar images. Thus, a Progress Indicator might help during loading as well.

14.5.7.3. Status Area

Create a Status Area (Chapter 15) to help the user monitor details such as word count and cursor position, if these aren't already provided by the Rich Text Editor widget. You'll need to hook into the widget's event model to keep the status up-to-date.

14.5.8. Metaphor

A Rich Text Editor is like an embedded GUI word processor.