HTML5 Contenteditable Атрибут Редактиране на уеб съдържание на предния край

Една от новите функции в HTML5 който ме привлече е родният преден редактор. Тази функция обикновено се прилага в системите за управление на съдържанието, за да се редактира съдържание директно от браузъра и обикновено се изгражда изцяло с JavaScript и AJAX. HTML5 идва, за да направи процеса по-лесен за използване contenteditable атрибут.

Какво прави

Когато се приложи към всеки елемент, този атрибут ще ни позволи редактиране съдържанието в него, да видим примера по-долу:

 Круасан от бисквитка. Датски бисквити Faworki. Jujubes прах бисквитни бисквити халва халва. Бисквитена бисквита.
 Сладка ролка тирамису шоколад бар захар слива карамели tootsie ролка карамели. Шоколадова торта. Applicake сусамовите щракани сладкарски сладкарски кроасан карамелски кекс пищен бисквит. Пръстени с бонбони за понички.

В този пример добавихме contenteditable атрибут и го задайте вярно съдържанието става редактируемо. За този атрибут могат да бъдат добавени две други стойности;

фалшив което прави обратното: съдържанието няма да може да се редактира
наследят; той ще превърне съдържанието, което може да се редактира, когато пряк родител също може да се редактира.

Преглед на демо

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

Как да запазите промените

Запазването на промените зависи от това къде ще съхраняваме данните; обикновено ще се записва в база данни. Но тъй като нямаме достъп до базата данни, в този урок ще ви покажем как да запазите промените локално хранилище. За да направим това, ще използваме и малко jQuery, за да направим кода по-прост. Препоръчвам ви да погледнете в миналото, настоящето и бъдещето на локалното съхранение на уеб приложения като допълнителна справка.

Първо, нека добавим a бутон до съдържанието ни.

  Сладка ролка тирамису шоколад бар захар слива карамели tootsie ролка карамели. Шоколадова торта. Applicake сусамовите щракани сладкарски сладкарски кроасан карамелски кекс пищен бисквит. Пръстени с бонбони за понички.

Идеята тук е, че ще запазим промените, след като бутонът бъде натиснат. Така че нека зададем това събитие чрез скрипта;

 var theContent = $ ('# content2'); $ ('# save'). on ('click', function () var editedContent = theContent.html (); localStorage.newContent = editedContent;);

Този код ще създаде нов ключ в localStorage, съдържащ последната промяна, направена в съдържанието. Можем да използваме Firebug или Инструменти за разработчици, за да изясним дали данните са съхранени успешно или не, но се уверете, че сте натиснали бутона. За потребителите на Firefox отидете на DOM панел и търсене на локално съхранение. В Chrome, както и в Safari, можем да го видим в раздела „Ресурси“.

След това можем да извлечем тези данни, за да актуализираме съдържанието, както следва;

 if (localStorage.getItem ('newContent')) theContent.html (localStorage.getItem ('newContent'));

Горният код ще идентифицира елемента newContent от localStorage и ако съществува, то ще предаде стойността на избрания елемент, в този случай # content2. На този етап, когато обновяваме страницата, все още трябва да виждаме промените, които сме направили.

Преглед на демо
Изтеглете Източник

Заключителна мисъл

В старите дни, добавянето на функцията за редактор на предния край, както показахме, може да отнеме часове или може би дори седмици. Днес отнема само секунда с този атрибут, contenteditable.

И според caniuse.com този атрибут вече се поддържа (изненадващо) в IE7 + и (не е изненадващо) в други браузъри, както следва: Firefox 12, Chrome 20, Safari 5.1 и Opera 12. Това означава, че можем да използваме този елемент с мир на ума, без да се налага да настройвате fallbacsk за по-старите браузъри.