HTML5 Contenteditable Attribut Rediger webindhold på Front-end

En af de nye funktioner i HTML5 der tiltrak mig er den indfødte front-end editor. Denne funktion bruges almindeligt i Content Management Systems til at redigere indhold direkte fra browseren og er normalt bygget fuldt ud med JavaScript og AJAX. HTML5 kommer til at gøre processen lidt lettere at bruge contenteditable attribut.

Hvad det gør

Når der anvendes et element, tillader denne attribut os at redigere indholdet i det, lad os se eksemplet nedenfor:

 Kage muffins croissant. Faworki dansk kiks. Jujubes pulverkage kage kiks halvah halvah. Kiks gummier gelé kiks.
 Sweet roll tiramisu chokolade bar sukker blomme karameller tootsie roll karameller. Chokoladekage wypas bomulds slikisning. Applicame sesamknap lakrids wienerbrød croissant karameller frugtkage peberkager kiks. Doughnut toffee candy canes.

I dette eksempel har vi tilføjet contenteditable attribut og sæt det rigtigt så indholdet bliver redigerbart. Der er to andre værdier, der kan tilføjes til denne attribut;

falsk hvilket gør det modsatte: indholdet kan ikke redigeres
arve; det vil gøre indholdet redigerbart, når direkte forælder kan også redigeres.

Se Demo

Hvis du har tjekket demoen ovenfor, kan du se, at indholdet kan redigeres lige fra browserne. Det skal dog bemærkes, at dette element ikke dækker opbevaring af de ændringer, vi har lavet, så når du opdaterer siden, efter at du har foretaget ændringen, vil indholdet vende tilbage.

Sådan gemmes ændringerne

Lagring af ændringer afhænger af, hvor vi gemmer dataene. Generelt bliver det gemt i en database. Men da vi ikke har adgang til databasen, vil vi i denne vejledning vise dig, hvordan du gemmer ændringerne i localStorage. For at gøre det bruger vi også en smule jQuery til at gøre koden enklere. Jeg anbefalede, at du kigger på fortiden, nutiden og fremtiden for lokal opbevaring til webapplikationer som yderligere reference.

Først og fremmest, lad os tilføje en knap ved siden af vores indhold.

  Sweet roll tiramisu chokolade bar sukker blomme karameller tootsie roll karameller. Chokoladekage wypas bomulds slikisning. Applicame sesamknap lakrids wienerbrød croissant karameller frugtkage peberkager kiks. Doughnut toffee candy canes.

Ideen her er, at vi gemmer ændringerne, når knappen er klikket. Så lad os indstille denne begivenhed gennem scriptet.

 var theContent = $ ('# content2'); $ ('# save'). på ('klik', funktion () var redigeretContent = theContent.html (); localStorage.newContent = redigeretindhold;);

Denne kode vil oprette en ny nøgle i localStorage, der indeholder den sidste ændring i indholdet. Vi kan bruge Firebug eller Developer Tools til at præcisere, om dataene er blevet gemt eller ej, men sørg for at trykke på knappen. For Firefox-brugere skal du gå til DOM panel og søg efter localStorage. I Chrome såvel som Safari kan vi se det under fanen 'Ressourcer'.

Vi kan derefter hente disse data for at opdatere indholdet som følger:

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

Koden ovenfor identificerer varen newContent fra localStorage, og hvis den eksisterer, vil den passere værdien til det valgte element, i dette tilfælde # indhold2. På dette tidspunkt, når vi opdaterer siden, skal vi stadig se den ændring, vi har foretaget.

Se Demo
Download kilde

Endelig tanke

I de gamle dage tilføjede funktionen for front-end editor som vi havde demonstreret, kan tage timer eller måske endda uger. I dag tager det kun et sekund med denne attribut, contenteditable.

Og ifølge caniuse.com understøttes denne attribut allerede (overraskende) i IE7 + og (overraskende) i andre browsere som følger: Firefox 12, Chrome 20, Safari 5.1 og Opera 12. Det betyder, at vi kan bruge dette element med fred sind uden at skulle installere fallbacsk til ældre browsere.