HTML5 Contenteditable atribut Uređivanje web-sadržaja na front-end

Jedna od novih značajki u programu HTML5 koja me privukla je izvorni front-end editor. Ova značajka obično se primjenjuje u sustavima za upravljanje sadržajem za uređivanje sadržaja izravno iz preglednika i obično se u potpunosti gradi s JavaScriptom i AJAX-om. HTML5 dolazi kako bi proces bio lakši za korištenje contenteditable atribut.

Što to radi

Kada se primijeni na bilo koji element, ovaj će nam atribut omogućiti Uredi sadržaj u njemu, pogledajmo primjer u nastavku:

 Kolačići s kolačićima. Faworki danski keks. Jujubes prah kolačić kolač biskvit halvah halvah. Biskvit gumeni biskvit.
 Slatka rolna tiramisu čokoladna šećerna šljiva karamela tootsie roll karamela. Čokoladni kolač, wypas glazura od slatkiša od pamuka. Primjena sezamovih kekica slatkog korijena kroasan karamele voćni kolač medenjak. Donut karamela bombona canes.

U ovom primjeru dodali smo contenteditable atribut i postavite ga pravi tako da se sadržaj može uređivati. Postoje dvije druge vrijednosti koje se mogu dodati za ovaj atribut;

lažan što čini suprotno: sadržaj se neće moći uređivati
nasljediti; sadržaj će se moći uređivati kada izravno roditelj može se uređivati.

Prikaži demo

Ako ste prethodno odjavili demonstraciju, možete vidjeti da se sadržaj može uređivati izravno iz preglednika. Međutim, treba napomenuti da ovaj element ne pokriva pohranjivanje izmjena koje smo napravili, pa kada osvježite stranicu nakon što napravite promjenu, sadržaj će se vratiti.

Kako spremiti promjene

Spremanje promjena ovisi o tome gdje ćemo pohraniti podatke; obično se sprema u bazu podataka. Budući da nemamo pristup bazi podataka, u ovom ćemo vam vodiču pokazati kako spremiti promjene localStorage. Da bismo to učinili, koristit ćemo i malo jQuery-a da bi kod učinili jednostavnijim. Preporučio sam vam da pogledate prošlost, sadašnjost i budućnost lokalne pohrane za web-aplikacije kao daljnju referencu.

Prije svega, dodamo dugme pored našeg sadržaja.

  Slatka rolna tiramisu čokoladna šećerna šljiva karamela tootsie roll karamela. Čokoladni kolač, wypas glazura od slatkiša od pamuka. Primjena sezamovih kekica slatkog korijena kroasan karamele voćni kolač medenjak. Donut karamela bombona canes.

Ideja je da ćemo pohraniti promjene nakon što kliknete na gumb. Dakle, postavimo ovaj događaj kroz skriptu;

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

Ovaj kôd će stvoriti novi ključ u lokalnom skladištu koji sadrži posljednju izmjenu u sadržaju. Pomoću alata Firebug ili Developer Tools možemo pojasniti jesu li podaci uspješno pohranjeni ili ne, ali provjerite jeste li pritisnuli gumb. Za korisnike Firefoxa, idite na DOM i potražite lokalnu pohranu. U pregledniku Chrome i Safari to možemo vidjeti na kartici "Resursi".

Tada možemo preuzeti te podatke kako bismo ažurirali sadržaj, kako slijedi;

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

Gornji kod će identificirati stavku newContent iz lokalnog skladišta i ako postoji, u tom slučaju će proslijediti vrijednost odabranom elementu # content2. U ovom trenutku, kada osvježimo stranicu, još uvijek trebamo vidjeti promjene koje smo napravili.

Prikaži demo
Preuzimanje izvora

Konačna misao

U stara vremena, dodavanje značajke urednika front-end-a kao što smo pokazali, može potrajati satima ili možda čak tjednima. Danas s ovim atributom treba samo sekundu, contenteditable.

Prema caniuse.com, ovaj atribut je već podržan (iznenađujuće) u IE7 + i (što nije iznenađujuće) u drugim preglednicima kao što su: Firefox 12, Chrome 20, Safari 5.1 i Opera 12. To znači da ovaj element možemo koristiti s mirom na umu bez potrebe za podešavanjem pada za starije preglednike.