javascript - 如何使contenteditable永久保存并全局保存?

标签 javascript php html contenteditable

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

关于javascript - 如何使contenteditable永久保存并全局保存?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29075166/

相关文章:

php - 为什么 Vue 不读取我通过 PHP 作为 Prop 传递的整个 JSON 对象?

javascript - @Media Query - 如何打破水平滚动?

javascript - 如何使整行可点击并更改颜色 Angular 4

javascript - 平面网站转换为 RoR 网站

javascript - 传递对 Dom 元素的引用

html - 如何重新设计或删除按钮(聚焦)的内边框

android - 我怎样才能使多个复选框下拉列表成为选中状态

javascript - 在同一页面上处理来自 ajax 驱动的 Fancybox 元素的 PHP 请求

php - 如何使用 cron、PHP 和 MySQL 代码删除包含多个搜索词的记录

php - 使用 shell 脚本将 CSV 文件上传到数据库显示错误