HTML and CSS Reference
In-Depth Information
There are also several new global attributes, which can be
added to any element. They are covered in this section.
contenteditable
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
done using JavaScript.
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.
