如何使内容可编辑永久和全局保存

How to make contenteditable save permanently and globally?

本文关键字：全局 保存 编辑 何使内      更新时间：2023-09-26

我正在尝试创建一个与Goodle-Docs非常相似的页面，每个有权访问该页面的人都可以简单地编辑文本。但是我的问题是我只能将这些更改保存在本地，如何让用户编辑内容可编辑的文本，以便更改在所有设备上可见？

我正在使用本教程，http://www.developerdrive.com/2012/06/allowing-users-to-edit-text-content-with-html5/但页面的更改仅保存在本地。

这是我的代码：

<!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>

您将需要一个后端来同步用户之间的内容，然后使用 AJAX 轮询对每个用户的更改。

就我个人而言，我建议查看这些JavaScript库和框架，因为它们包含的功能接近于您尝试实现的开箱即用功能：ShareJS，Derby和Meteor。

就像Waiski说的那样...

这已经很老了，但我想指出...

您可以通过localStorage.setItem（//itemname，//content） 来执行此操作，然后要获取它，localStorage.getItem（//itemname ）。欲了解更多信息，请查看Mozilla localStorage。你可以这样做，但不建议这样做。

日安！

p.s. 由于安全错误，由于不允许您将项目设置在堆栈溢出下，因此它在这里可能不起作用，但请自己检查一下！

<!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>

相关文章：