How to make contenteditable save permanently and globally?
Question
I am trying to create a page which is very similar to Goodle-Docs, where everybody with access to the page will simply be able to edit the text. However my problem is that I can only get these changes to save locally, how do I make users edit the content-editable text so that the change is visible on all devices?
I am using this tutorial, http://www.developerdrive.com/2012/06/allowing-users-to-edit-text-content-with-html5/ but the changes of the page are only saved locally.
Here is my code:
<!DOCTYPE html> <html> <head> <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()"> <div id="edit" contenteditable="true"> Here is the element </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>
2 answers
solution1
0 2015-03-16 21:43:13
You are going to need a back-end to sync content between users, and then poll the changes to each user with AJAX.
Personally I'd recommend checking out these javascript libraries and frameworks, as they contain features close to what you're trying to achieve out-of-the-box: ShareJS , Derby and Meteor .
solution2
0 2020-10-16 07:59:01
Just like Waiski was saying...
this is pretty old, but I would like to point out...
You are able to do this through localStorage.setItem( //itemname, //contents ), then to fetch it, localStorage.getItem( //itemname ). for more info check out Mozilla localStorage... . You can do this temorarly but not recommended.
Good Day!
ps it may not work here due to not allowing you to setItem under stackoverflow because of a SecurityError, but check it out yourself!
<!DOCTYPE html> <html> <head> <script> var version = 0; function saveEdits() { var editElem = document.getElementById("edit"); version = localStorage.getItem("v"); var versionTxt = document.createTextNode("Version " + localStorage.getItem("v")) document.body.appendChild(versionTxt); version++ localStorage.setItem("v", version); localStorage.setItem("Elm", editElem.innerHTML); document.getElementById("update").innerHTML="Edits saved!"; } var editedElem = document.getElementById("edit"); var edits = localStorage.getItem("Elm"); editedElem.innerHTML = edits; </script> </head> <body> <div id="edit" contenteditable="true"> Edit me </div> <button onclick="saveEdits()">save edits</button> <div id="update"> - Edit the text and click to save for next time</div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.