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

【问题标题】：How to make contenteditable save permanently and globally?如何使内容可编辑永久和全局保存？
【发布时间】：2015-03-16 10:59:50
【问题描述】：

我正在尝试创建一个与 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>

【问题讨论】：

好吧，你不应该使用 localStorage，而是使用数据库，例如 mysql。通过使用 localStorage，只有客户端编辑才能看到更改。
@Daan 是对的，使用DataBase 存储几个更改，并在运行时使用AJAX 检索它们。
知道了，所以我设法创建了一个 MySQL 表，但我不知道如何制作表格或检索信息。是否有一些关于如何做到这一点的好教程或视频？我是新手，刚刚离开 wordpress
为什么要使用数据库来保存任意数据？对于此示例，您最终将得到一个包含 id 和 content 列的表，其中一行。将原始 HTML 保存到文本文件（使用 PHP），然后使用 XHR 加载该文件的内容会容易得多（并且完成同样的事情）。除非您希望多个页面可编辑，否则这是最快的方法。
嗯，我计划采用与 google docs 类似的设置，包含 3 列。标题、ID 和内容，至少有 4 个不同的页面，其中包含可编辑的文本

标签： javascript php html contenteditable

【解决方案1】：

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

我个人建议查看这些 javascript 库和框架，因为它们包含的功能与您想要实现的开箱即用功能相近：ShareJS、Derby 和 Meteor。

【讨论】：

【解决方案2】：

就像怀斯基说的……

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

您可以通过 localStorage.setItem( //itemname, //contents ) 来做到这一点，然后获取它，localStorage.getItem(//itemname)。欲了解更多信息，请查看Mozilla localStorage...。您可以暂时这样做，但不建议这样做。

美好的一天！

附言由于 SecurityError 不允许您在 stackoverflow 下设置项目，它可能无法在此处工作，但您自己检查一下！

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

【讨论】：