HTML5 Contenteditable Atribut Uredi spletno vsebino na sprednji strani
Ena od novih funkcij v programu HTML5 , ki me je pritegnil, je avtohtona front-end urednik. Ta funkcija se običajno uporablja v sistemih za upravljanje vsebin za urejanje vsebine neposredno iz brskalnika in je običajno v celoti izdelana z JavaScriptom in AJAX-om. HTML5 prispeva k temu, da je postopek nekoliko lažji vsebinsko primerna atribut.
Kaj počne?
Ta atribut nam bo omogočil, ko bo uporabljen za kateri koli element Uredi vsebino v njem, poglejmo spodnji primer:
Piškotek rogljič kolač. Faworki Danish keks. Jujubes piškotek piškotek torta piškotov halvah halvah. Biskvit gumijasti žele piškot.
Sladki zvitek tiramisu čokoladni sladkor karamele sladkih slivov tootsie roll karamele. Čokoladna torta, wypas bombažna sladoled. Aplikacija sezamovih krempljev pecivo iz peciva pecivo iz kruškovih karamel. Krofni karamelni bonboni.
V tem primeru smo dodali vsebinsko primerna in jo nastavite prav vsebina postane urejevalna. Za ta atribut lahko dodamo še dve vrednosti;
falseki deluje nasprotno: vsebina ne bo mogoče urejatipodedovati; obrnil bo vsebino, ki jo je mogoče urejati, ko bo neposrednega starša lahko tudi uredite.
- Prikaži predstavitev
Če ste že odjavili predstavitev, lahko vidite, da je vsebino mogoče urejati neposredno iz brskalnikov. Vendar je treba opozoriti, da ta element ne zajema shranjevanja sprememb, ki smo jih naredili, zato se bo po posodobitvi strani po spremembi vsebina vrnila..
Kako shraniti spremembe
Shranjevanje sprememb je odvisno od tega, kje bomo shranili podatke; pogosto bo shranjena v podatkovni bazi. Ker pa nimamo dostopa do podatkovne baze, vam bomo v tej vadnici pokazali, kako shraniti spremembe localStorage. Da bi to naredili, bomo uporabili tudi del jQuery, da bo koda preprostejša. Priporočamo vam, da si kot nadaljnjo referenco ogledate preteklost, sedanjost in prihodnost lokalnega pomnilnika za spletne aplikacije.
Najprej dodamo a gumb poleg naše vsebine.
Sladki zvitek tiramisu čokoladni sladkor karamele sladkih slivov tootsie roll karamele. Čokoladna torta, wypas bombažna sladoled. Aplikacija sezamovih krempljev pecivo iz peciva pecivo iz kruškovih karamel. Krofni karamelni bonboni.
Ideja je, da bomo spremembe shranili, ko kliknemo gumb. Torej, nastavimo ta dogodek skozi scenarij;
var theContent = $ ('# content2'); $ ('# save'). on ('klik', funkcija () var editedContent = theContent.html (); localStorage.newContent = editedContent;); Ta koda bo ustvarila nov ključ v localStorage, ki vsebuje zadnjo spremembo v vsebini. Lahko uporabimo orodja Firebug ali Developer Tools, da pojasnimo, ali so bili podatki uspešno shranjeni ali ne, vendar se prepričajte, da ste pritisnili gumb. Za uporabnike Firefoxa pojdite na DOM in poiščite lokalno skladišče. V Chromu in Safariju si ga lahko ogledamo na kartici »Viri«.
Te podatke lahko nato pridobimo, da posodobimo vsebino, kot sledi;
if (localStorage.getItem ('newContent')) theContent.html (localStorage.getItem ('newContent')); Zgornja koda bo identificirala element newContent iz lokalnega skladišča in če obstaja, v tem primeru prenese vrednost izbranemu elementu # content2. Na tej točki, ko osvežimo stran, bi morali še vedno videti spremembe, ki smo jih naredili.
- Prikaži predstavitev
- Prenesi vir
Končna misel
V starih časih lahko dodajanje funkcije urednika front-end, kot smo pokazali, traja ure ali celo tedne. Danes s tem atributom traja samo sekundo, vsebinsko primerna.
Glede na caniuse.com je ta atribut že podprt (presenetljivo) v IE7 + in (kar ni presenetljivo) v drugih brskalnikih, kot so: Firefox 12, Chrome 20, Safari 5.1 in Opera 12. To pomeni, da lahko uporabimo ta element z mirom brez starejših brskalnikov.
