Firefox 3 - ContentEditable

July 23, 2007

Firefox 3 is expanding its rich WYSIWYG editing capabilities by adding support for the contentEditable attribute. Setting contentEditable to “true” allows you to make parts of a document editable. Firefox already supports using designMode to make an entire document editable. Here is a previous post about using designMode.

Here is an example of using contentEditable to make a simple rich editor in HTML: contenteditable.htm (NOTE: requires Firefox3.a6+ or a browser that supports contentEditable)

The new contentEditable features support the same API as designMode for interacting with the editable element:

document.execCommand - Executes the given command.
document.queryCommandEnabled - Determines whether the given command can be executed on the document in its current state.
document.queryCommandIndeterm - Determines whether the current selection is in an indetermined state.
document.queryCommandState - Determines whether the given command has been executed on the current selection.
document.queryCommandValue - Determines the current value of the document, range, or current selection for the given command.