HTML and CSS Reference
There are also several new global attributes, which can be
added to any element. They are covered in this section.
Invented by Microsoft, and reverse-engineered and imple-
mented by all other browsers, contenteditable is now officially
part of HTML.
contenteditable means two things for browsers: fi rst, that users
can edit the contents of elements with this attribute, so the
element must be selectable and the browser must provide a
caret to mark the current editing position; second, that changes
made to the document affect the selected content specifi -
cally selected and editable, that is you can make the text bold,
change the font, add lists, headings, and so on. contenteditable
is a Boolean attribute, so it can be set to true or false. Although
markup capitalisation is irrelevant, the DOM attribute requires
contentEditable (note the capital E) . The DOM also has
isContentEditable to asses whether this element is editable—
since the contenteditable fl a g c o u fl d h a v e b e e n fl n h e r fl t e d fl r o m
a parent element.
Yo u c a n a l s o s e t document.designMode = 'on' (notice, not 'true' )
to enable the entire document to be editable. This can only be
Finally, any selected (that is, highlighted) content by the user
can have a number of commands run against it, such as
document.execCommand('bold') . Typical keyboard commands to
make text bold or italic affect the DOM in the editable element.
If you want to use contenteditable for some form of CMS, you
will want to save the changes to your server at some point.
There's no particular API method for doing this, but since your
user's changes have modifi ed the DOM, you need to send the
innerHTML of the editable element (or entire document if using
designMode ) back to the server for saving in your CMS.