HTML5 Contenteditable Attribute

Sourabh Somani
Jun 15, 2014
13.6k
0
0
Article

Introduction

This article explains the HTML 5 contenteditable attribute and its functionality.

Overview

One of the new features in HTML 5 is the contenteditable attribute. In HTML 5 any element can be editable. By using some JavaScript event handler you can transform your web page into a fast rich text-box. This feature is mainly applied in Content Management Systems. By using this you can edit content directly from the browser. By using this feature you can create a Fast Rich Text Box and a WYSIWYG(What You See Is What You Get) Editor.

According to WHATWG.org: The contenteditable attribute is an enumerated attribute whose keywords are the empty string, true, and false. The empty string and the true keyword map to the true state. The false keyword maps to the false state. In addition, there is a third state, the inherit state, which is the missing value default (and the invalid value default).

States of contenteditable attribute

According to WHATWG.org there are the following 3 states of the contenteditable attribute:

State	Description	How to write?
true	Indicates that element is editable	contenteditable=" " / contenteditable="true"
false	Indicates that element is not editable	contenteditable="false"
inherit	Indicates that the element will be editable if and only if, its immediate parent element is editable	contenteditable="inherit"

Note: Remember that if you make a parent element as editable, then additionally all the children of that element will become editable because we know that by default the contenteditable attribute's value is inherit (mentioned in the above table). So you need to explicitly make the child element uneditable using contenteditable="false".

Syntax

<element contenteditable="true|false">

Example

<!DOCTYPE html>
<html>
<body>
<h1>HTML 5 contenteditable attribute example</h1>
<div contenteditable="true">
This text can be edited.
</div>
</body>
</html>

Output

When the page is loaded:
After editing:

If you check the example above then you will that the changes are not saved so if you want to save the changes then you can.

How to save the changes?

To save the changes, it depends on where we will store our data; commonly we use a database but in this article I am using localstorage to save the changes.

<!DOCTYPE html>
<html>
<head>
<style>
[contenteditable="true"] { padding: 10px; outline: 5px dashed #333; }
[contenteditable="true"]:hover { outline: 5px dashed #F00; background: }
</style>
</head>
<body>
<h1>HTML 5 contenteditable attribute example</h1>
<div id="content1" contenteditable="true">
This text can be edited.
</div><br/>
<button onclick="save()">Save Changes</button>
<script>
if(localStorage.newContent!==null)
{
document.getElementById("content1").innerHTML=localStorage.newContent;
}
function save(){
var content=document.getElementById("content1").innerHTML;
localStorage.newContent = content;
alert("Content Has Saved");
}
</script>
</body>
</html>

Output

Initially when the page is loaded:
When editing the text:
After clicking on the save changes button:

Now if you want to see the saved data then open a developer tool then go to the resource and click on local storage as in the following: