In Place Editing CMS Development HTML JavaScript Tutorial

Learn the logic behind building in-place content editing systems. We allow the user to edit content directly on the front-end where it displays. A good scenario to use this is granting a privileged user the right to edit some content in-place, save it to database when they finish editing, and restore the content container to its normal state.

<script>
function makeEditable(div){
    div.style.border = "1px solid #000";
    div.style.padding = "20px";
    div.contentEditable = true;
}
function makeReadOnly(div){
    div.style.border = "none";
    div.style.padding = "0px";
    div.contentEditable = false;
    alert("Run Ajax POST request here to save the div.innerHTML \
    or div.textContent to the database.");
}
</script>
<h2>This is a web page</h2>
<div onclick="makeEditable(this)" onblur="makeReadOnly(this)">
  div containing content to be managed by the user...
</div>