10/26/13

Editable HTML Elements with ContentEditable Attribute

With HTML, we often implement the editable contents with a TextArea, Text and RichText editor controls.  With HTML5, we can use the ContentEditable attribute on any content element to allow users to edit and change the content.

For example, when we use the following HTML page:

<!DOCTYPE html>
<html><head></head>
<body>
<header id="headercontent" contenteditable="true">
    My header
</header>

<div id="MainContent" contenteditable="true">
    main content
</div>

<footer id="footercontent" contenteditable="true">
    my footer
</footer>

</body></html>

We can see that the main body elements like header, main content and footer are set with an additional attribute. When the contenteditable attribute is set to true, the browsers that support HTML5 allows the users to click on the content and type text changes. This feature allows us to quickly create HTML content editors without having to resort to JavaScript plugins or text area controls.

We should note that the main purpose of this attribute is to allow users to update the content, but it does not allow the user to format the contents with text effects.  For that type of functionality we would need to add a plugin that can support rich text capabilities.