HTML5 Contenteditable atribuut Muuda veebisisu esiküljel

Üks uutest funktsioonidest HTML5 see, mis mind meelitas, on kohalik esikülgiredaktor. Seda funktsiooni rakendatakse sisuhaldussüsteemides üldiselt, et muuta sisu otse brauserist ja see on tavaliselt ehitatud täielikult JavaScripti ja AJAXiga. HTML5 on mõeldud selleks, et protsessi veidi lihtsam kasutada rahulolev atribuut.

Mida see teeb

Kui seda elementi rakendatakse, võimaldab see atribuut muuta vaadake allolevat näidet:

 Präänikuid muffinitäis. Faworki Taani biskviit. Jujubes pulber küpsis kook küpsise halvah halvah. Küpsised küpsised.
 Sweet roll tiramisu šokolaadi baari suhkru ploom karamellid tootsie roll karamellid. Šokolaadikook wypas puuvillakommid. Applicake sesame snaps lagritsa kondiitritooted croissant karamellid fruitcake piparkoogid küpsised. Donut toffee candy canes.

Selles näites oleme lisanud rahulolev atribuut ja seadke see tõsi nii muutub sisu redigeeritavaks. Selle atribuudi jaoks võib lisada veel kaks väärtust;

vale vastupidine: sisu ei ole redigeeritav
pärida; see muudab sisu redigeeritavaks, kui otsene vanem on ka redigeeritav.

Kuva demo

Kui olete ülaltoodud demo läbi vaadanud, näete, et sisu saab brauseritest kohe muuta. Siiski tuleb märkida, et see element ei hõlma meie tehtud muudatuste salvestamist, nii et kui värskendate lehekülge pärast muudatuse tegemist, siis sisu taastub.

Kuidas muuta muudatused

Muudatuste salvestamine sõltub sellest, kuhu me andmed salvestame; tavaliselt salvestatakse see andmebaasi. Kuid kuna meil ei ole andmebaasi juurdepääsu, näitame selles juhendis teile, kuidas muudatused salvestada localStorage. Selleks kasutame koodi lihtsamaks muutmiseks ka natuke jQuery. Soovitasin teil tutvuda veebirakenduste kohaliku salvestamise mineviku, oleviku ja tulevikuga.

Esiteks lisame a nuppu meie sisu kõrval.

  Sweet roll tiramisu šokolaadi baari suhkru ploom karamellid tootsie roll karamellid. Šokolaadikook wypas puuvillakommid. Applicake sesame snaps lagritsa kondiitritooted croissant karamellid fruitcake piparkoogid küpsised. Donut toffee candy canes.

Idee siin on, et salvestame muudatused pärast nupu klõpsamist. Niisiis, seadistame selle sündmuse skripti kaudu;

 var theContent = $ ('# content2'); $ ('# save'). sisse ('kliki', funktsioon () var editedContent = theContent.html (); localStorage.newContent = editedContent;);

See kood loob kohalikus hoidlas uue võtme, mis sisaldab sisus viimast muudatust. Me saame Firebug või Developer Tools abil selgitada, kas andmed on edukalt salvestatud või mitte, kuid veenduge, et vajutate nuppu. Firefoxi kasutajatele minge aadressile DOM paneel ja otsige kohalikku hoidlat. Nii Chrome'is kui ka Safaris näeme seda vahekaardil „Ressursid”.

Seejärel saame need andmed sisu allalaadimiseks alla laadida;

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

Ülaltoodud kood identifitseerib elemendi newContent kohalikust kontorist ja kui see on olemas, edastab see väärtuse valitud elemendile, antud juhul # sisu2. Siinkohal, kui me lehe värskendame, peaksime ikkagi nägema meie tehtud muudatust.

Kuva demo
Allalaadimise allikas

Lõplik mõte

Vanadel aegadel võib esipaneeli redigeerimisfunktsiooni lisamine, nagu me näitasime, võtta tunde või isegi nädalaid. Täna kulub selle atribuudiga vaid üks sekund, rahulolev.

Ja vastavalt Caniuse.com andmetele on see atribuut (üllatavalt) juba IE7 + -is ja (üllatav) teistes brauserites järgmiselt: Firefox 12, Chrome 20, Safari 5.1 ja Opera 12. See tähendab, et me saame seda elementi rahuga kasutada meeles, ilma et peaksite vanemate brauserite jaoks fallbacskit seadistama.