How to Edit Web Content with HTML5’s Contenteditable Attribute

By . in Coding. Updated on .

One of the new features in HTML5 is the native front-end editor. This feature is commonly used in Content Management Systems, allowing content to be edited directly in the browser, typically implemented with JavaScript and AJAX. HTML5 makes this process easier through the contenteditable attribute.

How it Works

This attribute allows content to be edited when applied to an element. Here’s an example:

<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 added the contenteditable attribute with a value of true, making the content editable. There are two other values for this attribute:

  • false, which makes the content non-editable
  • inherit, which makes the content editable if its parent element is editable.

View demo

In the demo, you can see that content is editable directly in the browser. However, changes won’t be saved when you refresh the page; it only covers content editing in the browser, not storing changes.

Saving Changes

Saving changes depends on where we store the data. Typically, it goes into a database, but since we lack database access, we’ll save changes in localStorage. We’ll also use some jQuery for simplicity. For further reference, consider The Past, Present & Future of Local Storage for Web Applications.

First, let’s add a button beside the 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 button will store changes when clicked. Let’s implement this with a script:

var theContent = $('#content2');

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

This script creates a new key in localStorage with the latest content changes. Use Firebug or Developer Tools to confirm the data’s storage, ensuring to press the button. For Firefox users, check the DOM panel for localStorage. In Chrome and Safari, it appears under ‘Resources’.

Inspect Firefox

To retrieve and update content with this data, use:

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

This code identifies the item newContent in localStorage and, if it exists, updates #content2 with its value. The content remains after refreshing the page.

View demo

Download source

Final Thought

In the past, adding a front-end editor, as demonstrated here, could take hours or even weeks. Now, with the contenteditable attribute, it can be done in seconds.

According to caniuse.com, this attribute is supported in modern browsers, including IE7+, Firefox 12, Chrome 20, Safari 5.1, and Opera 12. This means we can use it confidently without needing to set up fallbacks for older browsers.

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail