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

本文介绍了保存由可在任何网站上编辑的内容所做的更改的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 以下代码允许任何网站暂时完全可编辑： document.body.contentEditable = true; 如果我想使用此方法保存对特定网站所做的设置，该如何实现使用Javascript（如果需要的话使用PHP），以便下次我访问该URL时，网站会自动进行设置。这有可能吗？ 解决方案这是使用香草JS的一种方式。 这里是 JSFiddle ，因为StackOverflow不允许 localStorage 作为安全功能在网站上执行。 工作方式： 使用 window.onload = function（）{...} ，检查是否内容 键存在于 localStorage 如果存在，请加载数据放入< div class = content> 按编辑按钮， contentEditable 已切换 在这里，您可以使用任何方法来保存数据。我用 content.contentEditable ==='false'将 innerHTML 数据保存到'内容。 注意： localStorage 保存在本地浏览器中，使用数据库或类似的工具向所有查看者显示编辑内容。 //如果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:Using window.onload = function() {...}, check if 'content' keyexists in localStorageIf it does, load the data into <div class="content">Upon pressing Edit button, contentEditable is toggledHere 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 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', () => { // Toggle contentEditable on button clickcontent.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> 这篇关于保存由可在任何网站上编辑的内容所做的更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！