javascript — сохранение изменений, внесенных в контент, редактируемый на любом веб-сайте.

Question

javascript — сохранение изменений, внесенных в контент, редактируемый на любом веб-сайте.

Следующий код позволяет временно редактировать любой веб-сайт:

document.body.contentEditable = "true";

Если я хочу сохранить настройки, сделанные на определенном веб-сайте, используя этот метод, как я могу добиться этого с помощью Javascript и, при необходимости, PHP, чтобы в следующий раз, когда я посещал этот URL-адрес, веб-сайт автоматически обновлялся с выполненными настройками. Это вообще возможно? Есть ли расширение уже доступно?

-1

contenteditable javascript php

Решение

Accepted Answer

Вот способ, которым вы можете сделать это, используя 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>

1

Другие решения

[Ответ в основном спасен от комментариев, если бы он был здесь, людям было бы легче читать]

Сохраните данные внутри <div> (не всю страницу) в localStorage, Вы можете сохранить, когда document.body.contentEditable выключен. Затем вы можете повторно загрузить его в HTML, когда страница перезагрузится.

1

Источник