HTML5 Contenteditable Attribut Rediger webinnhold på forsiden

En av de nye funksjonene i HTML5 som tiltrukket meg, er den innfødte frontendredaktøren. Denne funksjonen brukes vanligvis i Content Management Systems for å redigere innhold direkte fra nettleseren og er vanligvis bygget fullt ut med JavaScript og AJAX. HTML5 kommer til å gjøre prosessen litt enklere å bruke contenteditable Egenskap.

Hva det gjør

Når det brukes på et element, tillater dette attributtet oss redigere innholdet i det, la oss se eksemplet nedenfor:

 Cookie muffins croissant. Faworki dansk kjeks. Jujubes pulverkake kake kjeks halvah halvah. Biscuit gummies gelé kjeks.
 Sweet roll tiramisu sjokoladebar sukker plomme karameller tootsie roll caramels. Sjokoladekake wypas sukkervarer. Applicame sesamknapt lakris kaker croissant karameller fruktkake pepperkake kjeks. Doughnut fløtekaramell candy canes.

I dette eksemplet har vi lagt til contenteditable Tilordne og sett det ekte slik at innholdet blir redigerbart. Det er to andre verdier som kan legges til for dette attributtet;

falsk som gjør det motsatte: innholdet vil ikke bli redigerbart
arve; det vil gjøre innholdet redigerbart når direkteforelder kan også redigeres.

Se demo

Hvis du har sjekket ut demoen ovenfor, kan du se at innholdet kan redigeres rett fra nettleserne. Det skal imidlertid bemerkes at dette elementet ikke dekker lagringen av endringene vi har gjort, så når du oppdaterer siden etter at du har gjort endringen, vil innholdet gå tilbake.

Hvordan lagre endringene

Lagring av endringer avhenger av hvor vi lagrer dataene; Vanligvis vil den bli lagret i en database. Men siden vi ikke har tilgang til databasen, i denne opplæringen, skal vi vise deg hvordan du lagrer endringene i lokal lagring. For å gjøre det, vil vi også bruke litt av jQuery for å gjøre koden enklere. Jeg anbefalte at du tar en titt på fortid, nåtid og fremtid for lokal lagring for webapplikasjoner som ytterligere referanse.

Først av alt, la oss legge til en knapp ved siden av innholdet vårt.

  Sweet roll tiramisu sjokoladebar sukker plomme karameller tootsie roll caramels. Sjokoladekake wypas sukkervarer. Applicame sesamknapt lakris kaker croissant karameller fruktkake pepperkake kjeks. Doughnut fløtekaramell candy canes.

Ideen her er at vi vil lagre endringene når knappen er klikket. Så, la oss sette denne hendelsen gjennom skriptet;

 var theContent = $ ('# content2'); $ ('# save'). på ('klikk', funksjon () var editedContent = theContent.html (); localStorage.newContent = redigertContent;);

Denne koden vil opprette en ny nøkkel i localStorage som inneholder den siste endringen som ble gjort i innholdet. Vi kan bruke Firebug eller Developer Tools til å avklare om dataene har blitt lagret eller ikke, men sørg for at du trykker på knappen. For Firefox-brukere, gå til DOM panel og søk etter localStorage. I Chrome og Safari kan vi se det under kategorien Ressurser.

Vi kan da hente disse dataene for å oppdatere innholdet slik:

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

Koden ovenfor identifiserer varen newContent fra localStorage og hvis den eksisterer, vil den passere verdien til det valgte elementet, i dette tilfellet # content2. På dette tidspunktet, når vi oppdaterer siden, bør vi fortsatt se endringen vi laget.

Se demo
Last ned kilde

Endelig tanke

I gamle dager, kan du legge til funksjonen for frontendeditoren som vi hadde vist, kan ta timer eller kanskje til og med uker. I dag tar det bare et sekund med dette attributtet, contenteditable.

Og ifølge caniuse.com er dette attributten allerede støttet (overraskende) i IE7 + og (overraskende) i andre nettlesere som følger: Firefox 12, Chrome 20, Safari 5.1 og Opera 12. Det betyr at vi kan bruke dette elementet med fred uten å måtte sette inn fallbacsk for eldre nettlesere.