HyperWrite - Consultancy and Training 

Help Systems, Structured Authoring, DITA, Hypertext, Documentation Technologies

HyperWrite Logo
Skip Navigation Links
Skip Navigation Links

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

Valid XHTML 1.0 Transitional Valid CSS!

Training

HyperWrite provides training in a number of authoring software tools, and in structured authoring, technical writing and Help authoring techniques. Find out more...