blogHome

HTML5 ContentEditable

September 16th, 2015

image

When we built the new Cotap.com, we switched to WordPress as our CMS in order to give our business team the ability to manage content rather than taking up developer resources for simple copy changes.

While creating the necessary inputs required to manage the headers, paragraphs and bullets, we quickly realized the admin pages were turning into a long pages filled with inputs.

Aside from making an overwhelming form for our marketing team, that method also separated copy and design elements. When a page is reduced to a series of inputs it becomes difficult to understand what impact, if any, copy changes will have until they are saved and viewed on the front end.

We knew the best solution would be one where editors could simply click on an element, make the copy change, and immediately see the impact it would have on the page.

HTML5’s ContentEditable attribute provided the user-side functionality we wanted. We created a simple javascript snippet that would take any text changes in a ContentEditable element and pass it to a paired hidden input.

$(document).ready(function() {
// Loop through each of the empty .editable elements and add filler edit text.
$(.editable:empty).each(function(){
$(this).text(Edit Me);
});
// On .editable blur() – when a user clicks off of an .editable element take it’s text and pass it to the corresponding input.
$(.editable).blur(function() {
var editableContent = $(this).text();
var inputID = # + $(this).data(editable-input-id);
// If there isn’t any content in the input area replace it with edit text filler text.
if (editableContent == ) {
var editableContent = ;
$(this).text(Edit Me);
}
// Replace the input’s value
$(inputID).val(editableContent);
});
});

view raw
gistfile1.js
hosted with ❤ by GitHub

With the Javascript in place, we just needed the editable element and it’s companion input 

Element:

  • The ContentEditable attribute tells the browser how to engage the content.

  • The editable class is used by the javascript to target the element.

  • The data-editable-input-id points to the id of the input where the value is saved.

Input:

  • It needs an id to target

  • The type attribute should be set to hidden so users don’t see it.

  • Placeholder isn’t necessary unless you’re showing the input.

<div contenteditable=true class=editable data-editable-input-id=input-name></div>
<input id=input-name type=text name=input-name value= placeholder=Don’t Touch Me />

view raw
gistfile1.html
hosted with ❤ by GitHub

image

The end product is a robust yet simple interface that our marketing and business teams love. It also has freed up extra development time and removed the delay in getting copy changes deployed.

For more complex editing capabilities and streamlining of data binding save you’re updated values into a single JSON string then save and parse for element values.

Originally Posted on the Cotap Engineer Blog – Click Here

Leave A Comment