HTML5 Contenteditable Attribut Redigera webbinnehåll på fronten

En av de nya funktionerna i HTML5 som lockade mig är den ursprungliga redaktören för framsidan. Den här funktionen används vanligtvis i Content Management Systems för att redigera innehåll direkt från webbläsaren och brukar byggas fullständigt med JavaScript och AJAX. HTML5 kommer att göra processen lite enklare att använda content attribut.

Vad den gör

När det tillämpas på något element, kommer detta attribut att tillåta oss att redigera innehållet i det, låt oss se exemplet nedan:

 Kakmuffin croissant. Faworki dansk kex. Jujubes pulver kaka kaka kex halvah halvah. Biscuit gummies gelékaka.
 Sött rulle tiramisu chokladstång socker plommonkarameller tootsie rullekarameller. Chokladkaka wypas sockervaddis Applicera sesam snaps lakris pastry croissant karameller fruktkaka pepparkaka kex. Donut karamell godisrottor.

I det här exemplet har vi lagt till content ange och ställa in det Sann så innehållet blir redigerbart. Det finns två andra värden som kan läggas till för detta attribut;

falsk vilket gör motsatsen: innehållet kommer inte att redigeras
ärva; Det kommer att göra innehållet redigerbart när direktförälder kan också redigeras.

Visa demo

Om du har kollat in ovanstående demo kan du se att innehållet kan redigeras direkt från webbläsarna. Det bör dock noteras att det här elementet inte täcker lagringen av de ändringar som vi gjort, så när du uppdaterar sidan efter att du har gjort ändringen kommer innehållet att återgå.

Så här reddar du ändringarna

Att spara ändringar beror på var vi ska lagra data. vanligtvis sparas den i en databas. Men eftersom vi inte har databasåtkomst, kommer vi i denna handledning att visa dig hur du kan spara ändringarna i lokalt utrymme. För att göra det ska vi också använda lite jQuery för att göra koden enklare. Jag rekommenderade att du kolla på Fortid, Nuvarande och Framtid för Lokal Lagring för Webapplikationer som ytterligare referens.

Först av allt, låt oss lägga till en knapp bredvid vårt innehåll.

  Sött rulle tiramisu chokladstång socker plommonkarameller tootsie rullekarameller. Chokladkaka wypas sockervaddis Applicera sesam snaps lakris pastry croissant karameller fruktkaka pepparkaka kex. Donut karamell godisrottor.

Tanken här är att vi kommer att lagra ändringarna när knappen är klickad. Så, låt oss sätta denna händelse genom skriptet.

 var theContent = $ ('# content2'); $ ('# save'). ((klicka), funktion () var editedContent = theContent.html (); localStorage.newContent = editedContent;);

Den här koden skapar en ny nyckel i localStorage som innehåller den senaste ändringen i innehållet. Vi kan använda Firebug eller Utvecklarverktyg för att klargöra om data har lagrats eller inte, men se till att du trycker på knappen. För Firefox-användare, gå till DOM panelen och leta efter localStorage. I Chrome och Safari kan vi se det under fliken Resurser.

Vi kan sedan hämta dessa data för att uppdatera innehållet enligt följande:

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

Koden ovan kommer att identifiera objektet nytt innehåll från localStorage och om det existerar, kommer det att passera värdet till det valda elementet, i det här fallet # content2. Vid den här tiden, när vi uppdaterar sidan, borde vi fortfarande se den förändring som vi gjort.

Visa demo
Hämta källa

Slutlig tanke

I de gamla tiderna kan du lägga till funktionen för avancerad editor som vi visat, kan ta timmar eller kanske till och med veckor. Idag tar det bara en sekund med detta attribut, content.

Och enligt caniuse.com stöds detta attribut redan (förvånansvärt) i IE7 + och (överraskande) i andra webbläsare som följer: Firefox 12, Chrome 20, Safari 5.1 och Opera 12. Det betyder att vi kan använda detta element med fred i åtanke utan att behöva installera fallbacsk för äldre webbläsare.