Latest revision as of 12:50, 22 May 2008

The Editing Area is the main space in the editor, dedicated to content input.

Compatible browsers provide a set of basic editing features with almost no coding requirements. It is enough to set document.designMode="on" (document.body.contentEditable=true in IE) and the document enters in "editing mode".

Editing Mode and Browsers

The following features are automatically provided by the browsers, when a document enters in "editing mode":

• A blinking caret is displayed in the document, indicating the current input place.
• Text typed with the keyboard is rendered in the input point.
• Cursor positioning with the keyboard, including special positioning, like CTRL+ARROW to jump a word, or CTRL+PAGE-UP to move to the start of the document.
• The ENTER and SHIFT+ENTER keys create new paragraphs or break the current line.
• Deleting is possible with the DEL and BACKSPACE keys.
• The TAB key may have a special behavior, like jumping between table cells.
• Some keystrokes can be used for formatting, like CTRL+B to make the text bold.
• Drag-and-drop of text and objects, like images.
• Resize handles for objects.
• Special editing tools, like table operations in Firefox.

As we can see, several important features are controlled by the browser. To note that not all browsers provide all these features.

But all this automation can be a problem in many cases, mainly when talking about cross-browser compatibility. The following are some issues:

• The ENTER key may behave differently. Some browsers will just append a <br> to the code, while others will create new paragraphs with <p>.
• The formatting applied by the browsers may differ. For example, CTRL+B may apply bold using the following markup, depending on the browser: <b>, <strong> and <span style="font-weight:bold">.
• Resizing of objects, like images, may not be desired.
• Due to browser bugs, the cursor position may end up on strange places, like in between paragraphs.

Fortunately, there are several ways to workaround all above issues, providing a consistent and buggy less experience.

Code Control of Editing Mode

All supported browsers offer a rich set of DOM features to interact with documents in editing mode. The following, is the commonly set of functions available for it:

• execCommand
• queryCommandEnabled
• queryCommandState
• queryCommandValue

You may check the Mozilla Developer Center or the MSDN for more information about these functions.

The key problem here is that there are no precise standards defining these functions. Microsoft introduced them with Internet Explorer 4, and then other browsers followed them, providing a "similar" set of features. But each browser implemented many of the features in its own different way, making the content produced with one browser many times hard to edit with other browsers.

Until a formal and well adopted standard is not available for the above functions, we should take much care when using them, or even avoid them if possible.