HTML5 Atribút s obmedzením Upraviť webový obsah na front-end

Jeden z nových funkcií v HTML5 , ktorý ma priťahoval, je pôvodný redaktor. Táto funkcia sa bežne používa v systémeach na správu obsahu na úpravu obsahu priamo z prehliadača a je zvyčajne postavená na ploche JavaScript a AJAX. HTML5 prichádza, aby sa proces trochu uľahčil pomocou contenteditable atribút.

Čo to robí

Pri použití na akýkoľvek prvok nám tento atribút umožní editovať obsah v ňom, uvidíme príklad nižšie:

 Klobása na cukrovinky. Factoryi dánska sušienka. Jujubes prášok cookie dort biscuit halvah halvah. Suché sušienky.
 Sladká rolka tiramisu čokoládová tyčinka cukrová slivka karamel tootsie roll caramels. Čokoládový koláč wypas čokoládová poleva. Aplikácia sezamová pečivo cukrárske karamelové ovocné koláče perníkové sušienky. Donut karamelové cukríky.

V tomto príklade sme pridali contenteditable atribút a nastaviť pravdivý takže obsah sa dá upraviť. K tomuto atribútu je možné pridať ďalšie dve hodnoty.

nepravdivý čo sa deje: obsah nebude možné upravovať
zdediť; to bude zmení obsah upraviteľný, keď priamy rodič je tiež editovateľné.

Zobraziť demo

Ak ste si vyskúšali demo vyššie, môžete vidieť, že obsah je možné upraviť priamo z prehľadávačov. Treba však poznamenať, že tento prvok nezahŕňa ukladanie zmien, ktoré sme vykonali, takže keď obnovíte stránku po vykonaní zmeny, obsah sa vráti späť.

Ako ukladať zmeny

Ukladanie zmien závisí od toho, kam uložíme údaje. bežne sa bude uložiť do databázy. Keďže však nemáme prístup k databázam, v tejto príručke vám ukážeme, ako ušetriť zmeny lokálny obchod. Aby sme tak urobili, budeme tiež používať trochu jQuery na zjednodušenie kódu. Odporúčam vám, aby ste sa pozreli na minulosť, súčasnosť a budúcnosť lokálneho úložiska pre webové aplikácie.

Po prvé, pridáme a gombík vedľa nášho obsahu.

  Sladká rolka tiramisu čokoládová tyčinka cukrová slivka karamel tootsie roll caramels. Čokoládový koláč wypas čokoládová poleva. Aplikácia sezamová pečivo cukrárske karamelové ovocné koláče perníkové sušienky. Donut karamelové cukríky.

Myšlienkou je, že po stlačení tlačidla uložíme zmeny. Takto nastavíme túto udalosť skriptom;

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

Tento kód vytvorí nový kľúč v localStorage obsahujúci poslednú zmenu v obsahu. Môžeme použiť nástroje Firebug alebo Vývojárske nástroje na objasnenie, či boli údaje úspešne uložené alebo nie, ale uistite sa, že ste stlačili tlačidlo. U používateľov prehliadača Firefox prejdite na DOM panel a vyhľadajte localStorage. V prehliadači Chrome aj Safari sa to zobrazuje na karte Zdroje.

Tieto údaje potom môžeme načítať na aktualizáciu obsahu takto:

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

Vyššie uvedený kód identifikuje danú položku newContent z localStorage a ak existuje, prejde hodnotu v tomto prípade na vybraný prvok # content2. V tomto momente, keď stránku aktualizujeme, by sme mali vidieť zmenu, ktorú sme vykonali.

Zobraziť demo
Stiahnuť zdroj

Konečná myšlienka

Za starých čias, pridanie editora funkcie front-end, ako sme preukázali, môže trvať hodiny alebo možno aj týždne. Dnes má tento atribút len jednu sekundu, contenteditable.

Podľa caniuse.com je tento atribút už v IE7 + (a prekvapivo) podporovaný v iných prehliadačoch: Firefox 12, Chrome 20, Safari 5.1 a Opera 12. To znamená, že môžeme použiť tento prvok s mierou mysle bez nutnosti nastaviť fallbacsk pre staršie prehliadače.