HTML5 Contenteditable Attribute: Edit Web Content On Front-end

This article is part of our “HTML5/CSS3 Tutorials series" – dedicated to help make you a better designer and/or developer. Click here to see more articles from the same series.

One of the new features in HTML5 that attracted me is the native front-end editor. This feature is commonly applied in Content Management Systems to edit content directly from the browser and is usually built fully with JavaScript and AJAX. HTML5 comes to make the process a little easier using contenteditable attribute.

What it does

When applied to any element, this attribute will allow us to edit the content in it, let’s see the example below:

<article id="content1" contenteditable="true">
	<p>Cookie muffin croissant. Faworki danish biscuit. Jujubes powder cookie cake
	biscuit halvah halvah. Biscuit gummies jelly biscuit.</p>

	<p>Sweet roll tiramisu chocolate bar sugar plum caramels tootsie roll caramels.
	Chocolate cake wypas cotton candy icing. Applicake sesame snaps liquorice pastry croissant
	caramels fruitcake gingerbread biscuit. Donut toffee candy canes.</p>
</article>

In this example, we’ve added contenteditable attribute and set it true so the content becomes editable. There are two other values that can be added for this attribute;

false which does the opposite: the content will not be editable

inherit; it will turn the content editable when the direct parent is editable as well.

View Demo

If you have checked out the demo above, you can see that the content can be edited right from the browsers. However it should be noted that this element does not cover the storing of the changes we made, so when you refresh the page after you’ve made the change, the content will revert.

How to Save the Changes

Saving changes depends on where we will store the data; commonly, it will be saved in a database. But since we do not have database access, in this tutorial, we are going to show you how to save the changes in localStorage. To do so, we will also use a bit of jQuery to make the code simpler. I recommended you take a look at The Past, Present & Future of Local Storage for Web Applications as further reference.

First of all, let’s add a button next to our content.


<article id="content2" contenteditable="true">
	<p>Sweet roll tiramisu chocolate bar sugar plum caramels tootsie roll caramels. Chocolate cake wypas cotton candy icing. Applicake sesame snaps liquorice pastry croissant caramels fruitcake gingerbread biscuit. Donut toffee candy canes.</p>
</article>

<button id="save">Save Changes</button>

The idea here is that we will store the changes once the button is clicked. So, let’s set this event through the script;


var theContent = $('#content2');

$('#save').on('click', function(){
	var editedContent 	= theContent.html();
	localStorage.newContent = editedContent;
});

This code will create a new key in localStorage containing the last change made in the content. We can use the Firebug or Developer Tools to clarify whether the data has been successfully stored or not, but make sure you hit the button. For Firefox users, go to the DOM panel and search for localStorage. In Chrome as well as Safari, we can see it under the ‘Resources’ tab.

We can then retrieve this data to update the content, as follows;


if(localStorage.getItem('newContent')) {
	theContent.html(localStorage.getItem('newContent'));
}

The code above will identify the item newContent from the localStorage and if it exists, it will pass the value to the selected element, in this case #content2. At this point, when we refresh the page, we should still see the change we made.

View Demo

Download Source

Final Thought

In the old days, adding the front-end editor feature as we had demonstrated, can take hours or perhaps even weeks. Today, it takes only a second with this attribute, contenteditable.

And, according to caniuse.com, this attribute is already supported, (surprisingly) in IE7+ and (unsurprisingly) in other browsers as follow: Firefox 12, Chrome 20, Safari 5.1 and Opera 12. That means we can use this element with peace of mind without having to setup fallbacsk for older browsers.