Users Edit Your Web Page

Under certain circumstances, you may wish to let your website readers edit certain sections of your web page. The edits are not saved to your server (unless you implement software to do so).

Whatever edits the reader makes is for their one session only. And only for as long as they have the web page loaded in their browser window (unless you implement cookies or other remembering functionality to reload their edits).

What the reader can do with the edited page, however, is

• make screenshots,
• print the page, and
• save the page to their hard drive.

They can do anything with the edited page they could do with the un‑edited web page — while the edited page is loaded in their browser.

Reasons for giving editing capability to your readers may include:

1. Provide a notepad your readers can keep open in their browsers.

2. Making a to-do list for printing out.

3. Let them type out observations about your content so they can make a screenshot and save to their computer or post to their favorite social media channel.

4. Just for fun.

The first two are examples in this article. Try them to see it work.

The Secret

The secret code to let people edit certain sections of your web page is this HTML tag attribute: contenteditable="true"

Put that attribute into any HTML tag that can contain content. Elements that can contain content are, as examples of a few, div, h1, td, ul, and pre.

Putting the contenteditable="true" into the tag is all it takes to make its content editable.

A Notepad Example

The box below is the notepad example. Type anything you want into it. The code for the notepad follows the example.

Here is the code for the above example:

<div contenteditable="true" style="border:3px dotted #ccc; border-radius:.5em; padding:1em;">
Replace this or add to it to use the notepad.
</div>

As indicated earlier, insert the contenteditable="true" attribute into the HTML tag. At that point, you're good to go.

A To-Do List Example

For the To-Do List, the contenteditable="true" attribute is in the ul tag. As before, the code follows this example.

Here is the code for the above example:

<div style="border:3px dotted #ccc; border-radius:.5em; padding:1em;">
<h4 style="margin:0;">To-Do List</h4>
<ul contenteditable="true">
<li>Wave to neighbor.</li>
<li>Read Will's book.</li>
<li>Call for appointment.</li>
</ul>
</div>

The contenteditable="true" attribute is in the ul tag this time. Only the list is editable.

Simple :)

The thing to remember is contenteditable="true". Use it to make any HTML element's content editable in the reader's browser.

Unless you have implemented functionality to do other things, reader edits will not be seen by other readers' page loads. When a reader reloads their edited web page, the edits disappear.

(This article first appeared with an issue of the Possibilities newsletter.)

Will Bontrager