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

Использование атрибута 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

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

  1. Откройте свою страницу в редакторе HTML.
    1. Создайте маркированный неупорядоченный список с именем myTasks :
       
      • Некоторая задача
    2.  
    3. Другая задача
    4.   

Добавьте атрибут contenteditable в элемент

    :

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

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

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

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

    }); 

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

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

      1.   localStorage.setItem ('myTasksData', this.innerHTML); // сохранить в localStorage  
      2.  });  
      3.   if (localStorage.getItem ('myTasksData')) {// если в localStorage есть контент  
      4.   $ ( "# MyTasks") HTML (localStorage.getItem ( 'myTasksData')).; // размещаем контент на странице  
      5.  }  
      6. }); 

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

     



    Мои задачи



    Мои задачи

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



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

    • Другая задача
      


$ (документ) .ready (function () {
$ (" #myTasks "). blur (function () {
localStorage.setItem ('myTasksData', this.innerHTML);
});
if (localStorage.getItem ('myTasksData')) {
$ ("# myTasks"). html (localStorage.getItem ('myTasksData'));
}
});


Оцените статью
Solutics.ru
Добавить комментарий