Editing with Internet Explorer

Editing pages with Internet Explorer

by David Halls

A page that can be edited

Simple editing

Making a part of a document editable is relatively straightforward. For an HTML element that you wish to edit, you assign the property, Contenteditable. This has been available in versions of Internet Explorer since version 4.0. For example, in the letter writing programme, we can put the entire HTML describing the letter within <DIV> tags which we make contenteditable. To do this, the template needs to be as shown below, with the XX entries denoting the bookmarks where the document will be filled with entries by code:-

 
<body>
<center>
//Insert HTML code for your letterheading here

<hr width = "650" />
<div CONTENTEDITABLE="true" width ="650">
<p>

XX1-Address
</p>
<p>&nbsp;</p>
<p>
XX2-Date
</p>
<p>&nbsp;</p>
<p>Dear
XX3-Salutation
,</p>
<p><b>
XX4-Title
</b></p>
<p>
XX5-Text
</p>
<p>Yours sincerely,</p>
<p>&nbsp;</p>
<p>A.Reader</p>
<p>Head Programmer</p>
</div>
</center>
</body>

Now, when the letter is produced, we can edit any errors we see directly on the screen. We can also use shortcuts to cut, paste, make bold, italic, etc, see below:

CTRL + K	Cut	CTRL + B	Bold
CTRL + C	Copy	CTRL + I	Italic
CTRL + V	Paste	CTRL + U	Underline

We could add buttons in a toolbar for these operations, as described in several articles. In this program, we want to keep things simple. The program formats the letter the way we want it and, if we did make a mistake in typing, it can now be corrected in the final displayed document. If we wanted to do anything more complicated, we really should be using a proper word processor, like MS Word.

The edited letter can be printed out when it will retain the changes, but the changes cannot yet be saved. If we were to try to save it, the changes made on screen will be lost.

Making the program behave and save

If you have produced a letter and edited it, you really need to be able to save it for future reference. To do this with Internet Explorer, we need to invoke the use of "behaviors". One type of "behavior" is a method called "SaveSnapshot" which allows us to save the edited page.

To do this:-

Add a meta tag in the Header section, as shown.

 
<META NAME = "save" CONTENT = "snapshot">

Set a style

 
<STYLE>
 .sSnapshot {behavior:url(#default#savesnapshot);}
 </STYLE>

Assign an ID for the element to be edited and saved.
Give that element the class "sSnapshot".

 
<DIV class = "sSnapshot" ID = "oEditable" CONTENTEDITABLE = "true">
 </DIV>

A note of caution to speakers of UK English. Please do not make the same mistake as I did; this left me puzzling for ages why this would not work for me. The spelling of behaviour is the American spelling without the "u", i.e. behavior.

Now the edited document can be save with a new name. Choose the option, "Web page, HTML only" from the options in the "Save As" dialog box. Note that it cannot be saved as the original filename, a new name needs to be chosen.

Click on this link to try editing and saving a letter prepared in this way

Conclusions

Using very few additional lines of HTML code, it is possible to make a document editable and to save the changes. The references below give more details of editing and explain the properties and methods used above.

References