保存由可在任何网站上编辑的内容所做的更改 [英] Save changes made by content editable on any website

问题描述

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

  document.body.contentEditable = true; 
  

如果我想使用此方法保存对特定网站所做的设置，该如何实现使用Javascript（如果需要的话使用PHP），以便下次我访问该URL时，网站会自动进行设置。这有可能吗？

解决方案

这是使用香草JS的一种方式。

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

工作方式：

1. 使用 window.onload = function（）{...} ，检查是否内容 键
   存在于 localStorage


2. 如果存在，请加载数据放入< div class = content>


3. 按编辑按钮， contentEditable 已切换


4. 在这里，您可以使用任何方法来保存数据。我用 content.contentEditable ==='false'将 innerHTML 数据保存到'内容。



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

---

< pre class = snippet-code-js lang-js prettyprint-override> //如果localStoragewindow中存在内容，则加载内容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'，（）=> {//切换content点击按钮可编辑内容.contentEditable =！content.isContentEditable; //如果禁用，则保存文本if（content.contentEditable ==='false'）{localStorage.setItem（'content'，content.innerHTML）;}}）;

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

 < div class = content  Lorem Ipsum只是印刷和排版行业的伪文本。自1500年代以来，Lorem Ipsum一直是行业的标准伪文本，当时一位不知名的打印机拿起了一个样板间，然后将其拼写成样本。它不仅生存了五个世纪，而且在电子排版方面也取得了飞跃，但基本上没有改变。在1960年代，它发布了包含Lorem Ipsum段落的Letraset表，并且在最近的桌面发行软件（如Aldus PageMaker，包括Lorem Ipsum的版本）中得到了广泛应用。 >编辑< / button>  

The following code allows any website to be completely editable temporarily:

document.body.contentEditable = "true";

If I want to save the settings made to a particular website using this method, how can I achieve this using Javascript and if needed PHP, so that next time I visit this URL, the website updates automatically with the settings made. Is this even possible? Is there an extension already available?

解决方案

Here's a way you can do this using vanilla JS.

Here's JSFiddle since StackOverflow doesn't allow localStorage to be executed on the website as a security feature.

How it works:

1. Using window.onload = function() {...}, check if 'content' key exists in localStorage
2. If it does, load the data into <div class="content">
3. Upon pressing Edit button, contentEditable is toggled
4. Here you can use any method to save the data. I used content.contentEditable === 'false' to save the innerHTML data to 'content' key.

To Note: localStorage is saved in your browser locally, use databases or anything similar to display edits to all viewers.

---

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

这篇关于保存由可在任何网站上编辑的内容所做的更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！