Skip to content

Instantly share code, notes, and snippets.

@pipethedev

pipethedev/content.html

Last active September 22, 2021 10:31
Show Gist options
  • Save pipethedev/ab78e18fccbfa7a7baf44d0ad5c3a807 to your computer and use it in GitHub Desktop.
Save pipethedev/ab78e18fccbfa7a7baf44d0ad5c3a807 to your computer and use it in GitHub Desktop.
Download ZIP
Editable
Raw
content.html
<!DOCTYPE html>
<html>
<head>
<title>Editable shit</title>
<style type="text/css">
#edit {background-color:#FFFF99;}
</style>
<script type="text/javascript">
function saveEdits() {
//get the editable element
var editElem = document.getElementById("edit");
//get the edited element content
var userVersion = editElem.innerHTML;
//save the content to local storage
localStorage.userEdits = userVersion;
//write a confirmation to the user
document.getElementById("update").innerHTML="Edits saved!";
}
function checkEdits() {
//find out if the user has previously saved edits
if(localStorage.userEdits!=null)
document.getElementById("edit").innerHTML=localStorage.userEdits;
}
</script>
</head>
<body onload="checkEdits()">
<p>This is a demo to accompany the following tutorial: <a href="http://www.developerdrive.com/2012/06/allowing-users-to-edit-text-content-with-html5">Allowing Users to Edit Text Content with HTML5</a></p><hr/>
<div id="edit" contenteditable="true">
Here is original shit
</div>
<input type="button" value="save my edits" onclick="saveEdits()"/>
<div id="update"> Edit the text and click to save for next time</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment