The HTML5 standard has introduced a lot of new features to prep for the modern web. It has learned from the offerings of existing browsers and incorporated modern features.
Web pages like blog postings and rich comment boxes require users to decorate their text to emphasis key points and this requires the ability to expose users to define their input in HTML form.
Internet Explorer 5 had introduced a couple of attributes to help with HTML editing – contenteditable and designMode. To provide the same features, the W3C has incorporated these attributes into HTML5.
contenteditable Basics
The contenteditable attribute can be specified in any element and when it is set to true, it makes the content of that element editable.
When a page containing an element with contenteditable attribute set is loaded in a browser, and a user clicks on the element, a caret appears to help edit the contents.
Here is a simple HTML5 listing which shows the attribute in action.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<header>
<h1>contenteditable demo</h1>
<p>Demo showing HTML5 condenteditable attribute</p>
</header>
<footer>
<h1></h1>
<p>HTML Goodies</p>
</footer>
<div id=”editable” contenteditable=”true” “>Double click and type to edit this</div>
</body>
</html>
When the above HTML is rendered in a browser, and the user double clicks on the div text, the text becomes editable and the user can edit the text.
We can put the div element across the page if we want to make the entire page editable.
It is not recommended to set contenteditable in the markup, Instead, one would set/unset it using JavaScript when the user takes a specific action.
designMode basics
The designMode is similar to contenteditable attribute, the key different being that designMode sets the whole page as editable when it is set Instead of just a single element.
Because this attribute makes the whole page editable, it is advised to use this within an iframe to contain the area which is editable.
Here is a sample listing showing how to use this attribute
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
</head>
<body>
<header>
<h1>designMode demo</h1>
<p>Demo showing HTML5 designMode attribute</p>
<iframe id=”myIframe” srcdoc=”test.html”></iframe>
<div>
<button onclick=”beginEdit()”>Begin Editing</button>
<button onclick=”endEdit()”>End Editing</button>
</div>
</header>
<script>
function beginEdit() {
var editableArea = document.getElementById(“myIframe”);
editableArea.contentWindow.document.designMode = “on”;
}
function endEdit() {
var editableArea = document.getElementById(“myIframe”);
editableArea.contentWindow.document.designMode = “off”;
}
</script>
</body>
</html>
When the above HTML is rendered in a browser, we can see that the whole iframe becomes editable when we click the button to begin edit mode.
Summary
In this article, we learned about the contenteditable and designMode attributes which convert a browser into a basic HTML editor. I hope you have found this information useful.
About the author
Vipul Patel is a technology geek based in Seattle. He can be reached at vipul.patel@hotmail.com . You can visit his LinkedIn profile at https://www.linkedin.com/pub/vipul-patel/6/675/508
