ХТМЛ5 Цонтентедитабле Аттрибуте Уреди Веб садржај на фронт-енд

Једна од нових функција у ХТМЛ5 која ме је привукла је изворни фронт-енд едитор. Ова особина се обично примјењује у системима за управљање садржајем да би уређивала садржај директно из претраживача и обично је у потпуности изграђена са ЈаваСцрипт-ом и АЈАКС-ом. ХТМЛ5 долази како би процес био лакши цонтентедитабле аттрибуте.

Шта ради

Када се примени на било који елемент, овај атрибут ће нам омогућити Уредити садржај у њему, да видимо пример испод:

 Цоокие колачић кроасан. Фаворки Данисх бисцуит. Јујубес у праху колачић колач бисквит халва халва. Бисцуит гуммиес јелли бисцуит.
 Слатки рол тирамису чоколадни шећер шљива карамела тоотсие ролл карамела. Чоколадни колач са шлагом на бомбоне. Примена сусамова кашика слаткиш пециво кроасан карамеле воћни колач медењак. Крофне слаткише од крафне.

У овом примеру смо додали цонтентедитабле атрибут и поставите га истина садржај постаје уређив. Постоје две друге вредности које се могу додати за овај атрибут;

фалсе што чини супротно: садржај неће бити могуће уређивати
наследити; то ће претворити садржај који се може уређивати када дирецт парент је могуће уређивати.

Виев Демо

Ако сте претходно погледали демо, можете видети да се садржај може уређивати директно из прегледача. Међутим, треба напоменути да овај елемент не покрива чување промена које смо направили, тако да када освежите страницу након што направите промену, садржај ће се вратити.

Како сачувати промене

Чување промена зависи од тога где ћемо сачувати податке; најчешће се чува у бази података. Али пошто ми немамо приступ бази података, у овом водичу ћемо вам показати како да сачувате промене локално складиште. Да бисмо то урадили, користићемо и мало јКуери да би код учинили једноставнијим. Препоручио сам вам да погледате прошлост, садашњост и будућност локалних складишта за Веб апликације као додатну референцу.

Прво, додајте а дугме поред нашег садржаја.

  Слатки рол тирамису чоколадни шећер шљива карамела тоотсие ролл карамела. Чоколадни колач са шлагом на бомбоне. Примена сусамова кашика слаткиш пециво кроасан карамеле воћни колач медењак. Крофне слаткише од крафне.

Идеја је да ћемо похранити промјене када кликнете на гумб. Поставимо овај догађај кроз скрипту;

 вар тхеЦонтент = $ ('# цонтент2'); $ ('# саве'). он ('клик', функција () вар едитедЦонтент = тхеЦонтент.хтмл (); лоцалСтораге.невЦонтент = едитедЦонтент;);

Овај код ће креирати нови кључ у лоцалСтораге-у који садржи последњу промену у садржају. Можемо да користимо Фиребуг или Девелопер Тоолс да разјаснимо да ли су подаци успешно сачувани или не, али будите сигурни да сте притиснули дугме. За кориснике Фирефок-а, идите на ДОМ панела и тражи локално складиште. У Цхроме-у, као иу Сафари-ју, можемо га видети на картици "Ресурси".

Тада можемо да преузмемо ове податке да бисмо ажурирали садржај, као што следи;

 иф (лоцалСтораге.гетИтем ('невЦонтент')) тхеЦонтент.хтмл (лоцалСтораге.гетИтем ('невЦонтент'));

Горе наведени код идентификује ставку невЦонтент из локалног складишта и ако постоји, проследиће вредност изабраном елементу, у овом случају # цонтент2. У овом тренутку, када освежимо страницу, још увек треба да видимо промене које смо направили.

Виев Демо
Довнлоад Соурце

Финал Тхоугхт

У старим временима, додавање функције фронт-енд едитора као што смо показали, може потрајати сатима или можда чак недељама. Данас, за овај атрибут потребно је само секунду, цонтентедитабле.

И, према цаниусе.цом, овај атрибут је већ подржан, (изненађујуће) у ИЕ7 + и (што није изненађујуће) у другим претраживачима као што су: Фирефок 12, Цхроме 20, Сафари 5.1 и Опера 12. То значи да можемо користити овај елемент са миром ума без потребе за подешавањем пада за старије прегледаче.