HTML5 Contenteditable Attribuut Bewerk Web Content op Front-end
Een van de nieuwe functies in HTML5 dat trok me aan, is de native front-end editor. Deze functie wordt vaak toegepast in Content Management Systems om inhoud rechtstreeks vanuit de browser te bewerken en wordt meestal volledig gebouwd met JavaScript en AJAX. HTML5 komt om het proces een beetje gemakkelijker te maken contenteditable attribuut.
Wat het doet
Wanneer dit kenmerk wordt toegepast op elk element, kunnen we dit doen Bewerk de inhoud erin, laten we het onderstaande voorbeeld bekijken:
Cookie muffin croissant. Faworki Deens koekje. Jujubes poeder koekje koekje halvah halvah. Biscuit gummies jelly biscuit.
Zoete rol tiramisu chocoladereep suikerpruim karamels tootsie rolkaramels. Chocolate cake wypas suikerspin glazuur. Sesame snaps zoethout gebak croissant karamels fruitcake peperkoek biscuit. Donut toffee snoep stokken.
In dit voorbeeld hebben we toegevoegd contenteditable attribuut en stel het in waar zodat de inhoud bewerkbaar wordt. Er zijn twee andere waarden die voor dit kenmerk kunnen worden toegevoegd;
valswat het tegenovergestelde doet: de inhoud kan niet worden bewerkterven; het zal de inhoud bewerkbaar maken wanneer het directe ouder is ook bewerkbaar.
- Demo bekijken
Als je de bovenstaande demo hebt uitgecheckt, kun je zien dat de inhoud rechtstreeks vanuit de browser kan worden bewerkt. Er moet echter worden opgemerkt dat dit element niet de opslag van de wijzigingen die we hebben aangebracht dekt, dus wanneer u de pagina vernieuwt nadat u de wijziging hebt aangebracht, wordt de inhoud teruggezet.
Hoe de wijzigingen op te slaan
Het opslaan van wijzigingen hangt af van waar we de gegevens opslaan; gewoonlijk wordt het opgeslagen in een database. Maar omdat we geen databasetoegang hebben, laten we u in deze zelfstudie zien hoe u de wijzigingen kunt opslaan lokale opslag. Om dit te doen, zullen we ook een beetje jQuery gebruiken om de code eenvoudiger te maken. Ik raad u aan om een kijkje te nemen naar Het verleden, het heden en de toekomst van lokale opslag voor webtoepassingen als verdere referentie.
Laten we eerst een toevoegen knop naast onze inhoud.
Zoete rol tiramisu chocoladereep suikerpruim karamels tootsie rolkaramels. Chocolate cake wypas suikerspin glazuur. Sesame snaps zoethout gebak croissant karamels fruitcake peperkoek biscuit. Donut toffee snoep stokken.
Het idee hier is dat we de wijzigingen opslaan zodra op de knop wordt geklikt. Laten we deze gebeurtenis dus via het script instellen;
var theContent = $ ('# content2'); $ ('# save'). on ('click', function () var editedContent = theContent.html (); localStorage.newContent = editedContent;); Deze code maakt een nieuwe sleutel aan in LocalStorage die de laatste wijziging bevat die in de inhoud is gemaakt. We kunnen de Firebug- of ontwikkelaarstools gebruiken om te verduidelijken of de gegevens met succes zijn opgeslagen of niet, maar zorg ervoor dat u op de knop drukt. Voor Firefox-gebruikers, ga naar DOM paneel en zoek naar localStorage. Zowel in Chrome als Safari kunnen we dit bekijken op het tabblad 'Bronnen'.
We kunnen deze gegevens dan als volgt ophalen om de inhoud bij te werken;
if (localStorage.getItem ('newContent')) theContent.html (localStorage.getItem ('newContent')); De bovenstaande code identificeert het item nieuwe inhoud van de localStorage en als deze bestaat, zal deze in dit geval de waarde doorgeven aan het geselecteerde element # content2. Op dit moment, wanneer we de pagina vernieuwen, moeten we de wijziging die we hebben doorgevoerd nog steeds zien.
- Demo bekijken
- Download de bron
Laatste gedachte
Vroeger kon het toevoegen van de front-end bewerkingsfunctie zoals we hebben aangetoond, uren of misschien zelfs weken duren. Vandaag duurt het slechts een seconde met dit kenmerk, contenteditable.
En, volgens caniuse.com, wordt dit kenmerk al (verrassend) ondersteund in IE7 + en (niet verwonderlijk) in andere browsers als volgt: Firefox 12, Chrome 20, Safari 5.1 en Opera 12. Dat betekent dat we dit element met vrede kunnen gebruiken of mind zonder eerst fallbacsk te moeten instellen voor oudere browsers.
