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>