This article describes and demonstrates techniques only applicable to Internet Explorer. Your browser (Mozilla) may not display some parts of this article as Internet Explorer does.
Editable HTML Content
Useless or an Opportunity?
Dynamic HTML is a feature that can be used to provide superficial glitz or
important functionality to a Web page. You could say that DHTML provides an
opportunity to either improve or degrade; a powerful tool that should be used
wisely. (For more information, please read Amazing DHTML - But is it Useful?.)
One of the little known features of DHTML, at least within Internet Explorer
5.5 or above,
is an attribute known as contentEditable. This attribute can be used to
make areas of text within a Web page editable by the user. This is very
different from a form element, such as a text box, as contentEditable can make a
table cell, or a standard paragraph editable. Let's jump right into an example.
(If you aren't using IE 5.5 or above to read this article, you won't be able to
experience the feature.)
| Editable Table |
| Name |
Try changing this text here! |
| Address |
And you can insert text here too, or the cell below. |
| City |
|
How is this done? Simple. Within the <td> table cell tags there is a
simple div tag, with an attribute of contentEditable set to true:
<div contentEditable="true">Try
changing...</div>
Like all DHTML features, JavaScript can be used to dynamically turn on or off
the contentEditable attribute, as an alternative to 'hard-coding' the attribute.
For example, a JavaScript link to JavaScript:void(document.body.contentEditable="true");
would make the entire body of this page editable. Let's try something something
more specific. This JavaScript
link makes only the paragraph below editable (and while it's at it, changes
the text too). This link
reverts it to non-editable, by changing the contentEditable attribute back to
false.
Non-editable paragraph
This paragraph is always editable.
The contentEditable attribute applies to many HTML tags, including A,
BLOCKQUOTE, BODY, LI, P, PRE and SPAN.
So that's all very nice, but how can this be useful? A user can change the
words displayed within his or her browser, but it's not editing the page content
on the Web server. Sounds like a silly toy, at first
hearing!
But what about if this feature was used within a Web application, or even a
simple order form? Using some clever DHTML, this contentEditable feature can
allow a Rich Text edit box to be created, or a modified paragraph to be
submitted with the HTML form, and so on. When you start thinking about it more
and more, you can start to see more and more uses for this feature that are
definitely not gimmicks. It's very likely that we'll see this feature being used
more and more, in very clever ways.
Let's try another example which may trigger some ideas.
This is some more editable text. Try highlighting
some of the text, and then use the three links below to change the text
attributes. What we've done here is created a simple WYSIWYG HTML editor
within this page. Use the Show HTML link after you've finished playing
with attributes to see what HTML this would produce.
bold
khaki
italic
Show HTML
An important word of caution, though! You need to be careful when
using this feature, particularly within a Web-based application or form, such as
an ordering system. This is because a rogue user might compromise the security of
the application. Such a malicious user could possibly inject control characters or script
to mess around with the Web server when the form is submitted. This potential
problem can be overcome by using JavaScript within the page to validate the
entered data before the form is submitted to the server.
Mozilla implements a contentEditable feature also, though it is slightly
different to the IE use (and more sophisticated). Find out more at http://www.playsophy.com/Wrap/mozce.html.