Как сделать содержимое веб-страницы редактируемым посетителями сайта

Содержание

1 Поддержка Contenteditable Attribute
2 Как использовать Contenteditable
3 Создайте редактируемый список дел с помощью Contenteditable

Сделать текст на сайте редактируемым пользователями проще, чем вы ожидаете. HTML предоставляет атрибут для этой цели: contenteditable.

Атрибут contenteditable был впервые представлен в 2014 году с выпуском HTML5. Он указывает, может ли контент, которым он управляет, быть изменен посетителем сайта из браузера.

Поддержка Contenteditable Attribute

Большинство современных настольных браузеров поддерживают этот атрибут. Они включают:

Chrome 4.0 и выше
Internet Explorer 6 и выше
Firefox 3.5 и выше
Safari 3.1 и выше
Opera 10.1 и выше
Microsoft Edge

То же самое относится и к большинству мобильных браузеров.

Как использовать Contenteditable

Просто добавьте атрибут к элементу HTML, который вы хотите сделать редактируемым. У него есть три возможных значения: истина, ложь и наследование. Наследовать — это значение по умолчанию, означающее, что элемент принимает значение своего родителя. Аналогично, любые дочерние элементы вашего вновь редактируемого содержимого также будут доступны для редактирования, если вы не измените их значения на false. Например, чтобы сделать элемент DIV редактируемым, используйте:

Создайте редактируемый список дел с помощью Contenteditable

Редактируемый контент имеет больше смысла, когда вы связываете его с локальным хранилищем, поэтому контент сохраняется между сеансами и посещениями сайта.

Откройте свою страницу в редакторе HTML.
1. Создать маркированный, неупорядоченный список с именем мои задачи:
```
Какая-то задача
```
2. ```
Еще одно задание 
```

Добавьте атрибут contenteditable к

Теперь у вас есть список дел, который можно редактировать, но если вы закроете браузер или покинете страницу, ваш список исчезнет. Решение: добавьте простой скрипт для сохранения задач в localStorage.

Добавьте ссылку на jQuery в вашем документе.

В этом примере используется Google CDN, но вы можете разместить его самостоятельно или использовать другой CDN, если хотите.

Внизу вашей страницы, чуть выше тега, добавьте ваш скрипт:

});

Это начало функции jQuery document.ready и говорит браузеру загрузить этот скрипт после полной загрузки документа.

Внутри функции document.ready добавьте свой скрипт, чтобы загрузить задачи в localStorage и получить все задачи, которые были сохранены ранее:

localStorage.setItem ('myTasksData', this.innerHTML); // сохранить в localStorage

```
});
```

if (localStorage.getItem ('myTasksData')) {// если в localStorage есть контент

$ ( "# MyTasks") HTML (localStorage.getItem ( 'myTasksData')). // помещаем контент на страницу

```
}
```
```
 });
```

HTML-код для всей страницы выглядит следующим образом:

Мои задачи

Мои задачи

Введите элементы для вашего списка. Браузер сохранит его для вас, поэтому, когда вы снова откроете браузер, он все равно останется здесь.

Какая-то задача

Еще одно задание

$ (Документ) .ready (функция () {
$ ("# myTasks"). blur (function () {
localStorage.setItem ('myTasksData', this.innerHTML);
});
if (localStorage.getItem ('myTasksData')) {
$ ( "# MyTasks") HTML (localStorage.getItem ( 'myTasksData')).
}
});