Question

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

document.body.contentEditable = "true";

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

Answer 1

[答案基本上是从评论中挽救，如果它在这里会更容易让人们阅读]

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

Answer 2

这是使用vanilla JS的方法。

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

工作原理：

使用window.onload = function() {...}，检查是否'content'键存在于localStorage
如果是，请将数据加载到<div class="content">
按Edit按钮后，contentEditable切换
您可以使用任何方法保存数据。我使用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>

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

2 个答案: