HTML5 Contenteditable атрибут за редактиране на съдържание в интерфейса
Една от новите функции на HTML5, която привлече вниманието ни, е възможността за редактиране на съдържание от интерфейса. Тази функция често се среща в CMS - потребителите могат да редактират съдържание директно с браузъра си, но досега тя е реализирана с помощта на javascript и Ajax. HTML5 значително опростява този процес, като ни предлага атрибута „Contenteditable“.
Какви са неговите функции
Когато този атрибут се приложи към елемент, той ни позволява да редактираме съдържанието в този елемент. Нека разгледаме примера по-долу:
В този пример добавихме атрибута Contenteditable и зададохме стойността на „true“ и сега съдържанието може да се редактира. Има и 2 други стойности, които могат да се използват с този атрибут:
False - позволява ви да изключите възможността за редактиране на съдържанието Наследяване - позволява ви да направите съдържанието редактируемо, ако родителският елемент също позволява редактиране
Ако сте разгледали демонстрацията по-горе, можете да видите, че съдържанието може да се редактира директно с помощта на прозореца на браузъра. Все пак трябва да се отбележи, че елементите не запазват променените стойности, което означава, че след презареждане на страницата всичко ще се върне на мястото си.
Как можем да запазим стойности
Първо, нека добавим бутон до нашето съдържание.
Въпросът тук е, че ние ще запазим промените, когато бутонът бъде щракнат. Затова нека изпълним това събитие с помощта на скрипт:
Този код ще създаде нов ключ в localStorage, който ще съдържа последните направени промени. Можете да използвате Firebug или Инструменти за разработчици, за даза да изясните дали информацията е запазена успешно или не, просто не забравяйте да кликнете върху бутона. За потребители на Firefox: трябва да отидете на панела DOM и да намерите там localStorage. В Chrome и Safari можем да намерим това в раздела Ресурси.
След това можем да поискаме тези данни, за да актуализираме съдържанието, както следва:
Горният код ще идентифицира елемента newContent в localStorage и, ако присъства, ще предаде стойността на избрания елемент, в този случай #content2. На този етап, когато обновим страницата, направените промени се запазват.
Преди внедряването на такава функционалност би отнело десетки часове или дори седмица. Днес всичко това се прави в рамките на половин час с помощта на атрибута contenteditable.
И според caniuse.com, този атрибут вече се поддържа в (изненадващо) IE7+ и (не е изненадващо) други браузъри: Firefox 12, Chrome 20, Safari 5.1 и Opera 12. Това означава, че можем да използваме този елемент, без да се налага да се тревожим за резервни варианти за наследени браузъри.