Firefox 3 – ContentEditable

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.

3 Comments

  1. pd said,

    July 23, 2007 @ 10:15 pm

    Thanks for this Mark. I’d noticed some changes at Burning Edge but it’s always better to get your clear explanations.

    However the thing with rich text editing in browsers that seems to get ignored is what to do with the actual edited content.. Do you have any tips on where I can get more information on WebDAV for example?

  2. Erik Arvidsson said,

    July 25, 2007 @ 12:06 pm

    Thanks a lot. This has been on the top of a lot of peoples wish lists.

  3. Paul Medlock said,

    July 30, 2007 @ 4:24 pm

    Mark, will this be usable/available in XULExplorer/xulrunner and will it provide edit caret control to the JavaScript?

RSS feed for comments on this post