Создание содержимого веб-страницы Редактируемый посетителями сайта

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

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

Поддержка атрибута Contenteditable

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

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

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

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

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

Создание редактируемого списка дел с Contenteditable

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

1. Откройте страницу в редакторе HTML.
2. Создайте маркированный, неупорядоченный список с именем мои задачи:
   2. Некоторая задача
   4. Другая задача
5. Добавитьcontenteditable атрибут
   элемент:
   Теперь у вас есть список дел, доступный для редактирования, но если вы закроете свой браузер или покинете страницу, ваш список исчезнет. Решение. Добавьте простой скрипт для сохранения задач в localStorage.
8. Добавить ссылку на jQuery в вашего документа. В этом примере используется CDN Google, но вы можете разместить его самостоятельно или использовать другой CDN, если хотите.
11. В нижней части страницы, чуть выше тег, добавьте свой скрипт: Это начало jQuery document.ready и говорит браузеру загрузить этот скрипт после полной загрузки документа.

Внутри document.ready функцию, добавьте скрипт для загрузки задач в localStorage и получите любые ранее сохраненные задачи: $ (document.ready (function () {

1. $ ("# myTasks"). blur (function () {// когда курсор покидает элемент #myTasks
4. localStorage.setItem ('myTasksData', this.innerHTML); // сохранять в localStorage
7. });
10. if (localStorage.getItem ('myTasksData')) {// если есть содержимое в localStorage
13. $ ( "# MyTasks") HTML (localStorage.getItem ( 'myTasksData')). // размещение контента на странице
16. }
17. });

HTML для всей страницы выглядит так:

Мои задачи

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

• Некоторая задача
• Другая задача