Научете как да настроите съдържанието на уеб страниците като редактируеми за посетителите на сайта

Използване на атрибута Contenteditable

Изработването на текст на уебсайт, редактиран от потребителите, е по-лесно, отколкото може да очаквате. HTML предоставя атрибут за тази цел: contenteditable.

Атрибутът "contentedable" беше въведен за пръв път през 2014 г. с пускането на HTML5 . Тя определя дали съдържанието, което управлява, може да бъде променено от посетител на сайта от браузъра.

Поддръжка на атрибута

Повечето съвременни настолни браузъри поддържат атрибута.

Те включват:

Същото важи и за повечето мобилни браузъри.

Как да използваме Contenteditable

Просто добавете атрибута към елемента HTML, който искате да редактирате. Има три възможни стойности: вярно, невярно и наследствено. Inherit е стойността по подразбиране, което означава, че елементът приема стойността на основния си елемент. По същия начин всички детски елементи от ново редактираното ви съдържание също ще могат да се редактират, освен ако не промените стойностите им на фалшиви. Например, за да направите DIV елемент редактиран, използвайте:

Създаване на редактиращ списък със задачи с умение

Редактируемото съдържание има най-голямо значение, когато го сдвоите с локално хранилище, така че съдържанието продължава да съществува между сесиите и посещенията на сайта.

  1. Отворете страницата си в HTML редактор.
  2. Създайте подреден , неорганизиран списък с име myTasks :

    • Някои задачи
    • Друга задача
  1. Добавете атрибута contenteditable към елемента
      :
      Вече имате списък със задачи, който може да се редактира, но ако затворите браузъра си или напуснете страницата, списъкът ви ще изчезне. Решението: Добавете прост скрипт, за да запазите задачите в localStorage.
    • Добавете връзка към jQuery в на вашия документ.