保存任何网站上可编辑的内容所做的更改

Question

以下代码允许任何网站暂时完全可编辑：

document.body.contentEditable = "true";

如果我想使用此方法保存对特定网站所做的设置，我如何使用 Javascript 以及如果需要 PHP 来实现此目的，以便下次访问此 URL 时，网站会自动更新所做的设置。这甚至可能吗？是否有可用的扩展程序？

Answer 1

您可以使用 vanilla JS 来做到这一点。

这里是 JSFiddle，因为 StackOverflow 不允许在网站上执行 localStorage 作为安全功能。

工作原理：

1. 使用window.onload = function() {...}，检查是否'content'键 存在于localStorage
2. 如果是，将数据加载到<div class="content">
3. 按下Edit 按钮后，contentEditable 被切换
4. 在这里您可以使用任何方法来保存数据。我使用content.contentEditable === 'false' 将innerHTML 数据保存到'content' 键。

注意：localStorage 保存在本地浏览器中，使用数据库或任何类似的东西向所有查看者显示编辑。

---

// Load content onload if it exists in localStorage
window.onload = function() {
	if(localStorage.getItem('content')) {
		document.querySelector('.content').innerHTML = localStorage.getItem('content');
  }
}

let editBtn = document.querySelector('#edit_content');
let content = document.querySelector('.content');

editBtn.addEventListener('click', () => {
  // Toggle contentEditable on button click
	content.contentEditable = !content.isContentEditable;
  
  // If disabled, save text
  if(content.contentEditable === 'false') {
  	localStorage.setItem('content', content.innerHTML);
  }
});

.content {
  border: 1px solid;
  padding: 15px;
}

<div class="content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<br>
<button id="edit_content">Edit</button>

Answer 2

[答案基本上是从cmets中抢救出来的，如果在这里更容易让人阅读]

将<div>（不是整个页面）内的数据保存到localStorage。当document.body.contentEditable 被禁用时，您可以保存。然后，您可以在页面重新加载时将其重新加载到 html 中。