HTML5 Contenteditable attribútum Webtartalom szerkesztése Front-enden

Az egyik új funkció a HTML5 ami hozzám vonzott, a natív front-end szerkesztő. Ezt a funkciót általában a Content Management Systems rendszerben alkalmazzák a tartalom közvetlenül a böngészőből történő szerkesztésére, és általában teljesen JavaScript és AJAX használatával épül fel. A HTML5-nek köszönhetően a folyamat egy kicsit könnyebbé válik contenteditable tulajdonság.

Mit csinál

Bármely elemre alkalmazva ez az attribútum lehetővé teszi számunkra szerkesztés nézzük meg az alábbi példát:

 
Cookie muffin croissant. Faworki dán keksz. Jujubes por cookie torta keksz halvah halvah. Keksz gummies zselés keksz.
 
Édes tekercs tiramisu csokoládé bár cukor szilva karamell. Csokoládé torta wypas pamut cukorka jegesedés. Az applicake szezámmag édesgyökér tészta croissant karamelleket tartalmaz. Fánk karamella édességet vesszők.
 
 

Ebben a példában hozzáadtuk contenteditable attribútum és állítsa be igaz így a tartalom szerkeszthetővé válik. Két további érték is hozzáadható ehhez az attribútumhoz;

• hamis ami ellentétes: a tartalom nem szerkeszthető
• örököl; ez a tartalom szerkeszthető, ha a közvetlen szülő szerkeszthető is.

• Demó megtekintése

Ha megnézte a fenti bemutatót, láthatja, hogy a tartalom szerkeszthető közvetlenül a böngészőktől. Meg kell azonban jegyezni, hogy ez az elem nem fedi le az elvégzett módosítások tárolását, így ha az oldalt a módosítás után frissíti, a tartalom vissza fog térni.

Hogyan lehet menteni a módosításokat

A változások mentése attól függ, hogy hol tároljuk az adatokat; általában egy adatbázisba kerül. De mivel nincs adatbázis-hozzáférésünk, ebben a bemutatóban megmutatjuk, hogyan lehet menteni a változásokat helyi raktár. Ehhez egy kis jQuery-t használunk a kód egyszerűsítéséhez. Azt tanácsoltam, hogy tekintse meg a Webes alkalmazások helyi tárolásának múltját, jelenét és jövőjét.

Először is, adjunk hozzá egy gomb a tartalom mellett.

 
 
Édes tekercs tiramisu csokoládé bár cukor szilva karamell. Csokoládé torta wypas pamut cukorka jegesedés. Az applicake szezámmag édesgyökér tészta croissant karamelleket tartalmaz. Fánk karamella édességet vesszők.
 
 Változtatások mentése 

Az elképzelés az, hogy a változtatásokat a gombra kattintva tároljuk. Tehát állítsuk be ezt az eseményt a szkript segítségével;

 var theContent = $ ('# content2'); $ ('# save'). be ('click', függvény () var editedContent = theContent.html (); localStorage.newContent = editedContent;); 

Ez a kód egy új kulcsot hoz létre a helyi tárolóban, amely tartalmazza a tartalomban végrehajtott utolsó változtatást. A Firebug vagy a Developer Tools segítségével tisztázhatjuk, hogy az adatokat sikeresen tárolták-e vagy sem, de győződjön meg róla, hogy megnyomja a gombot. A Firefox-felhasználók számára menjen a DOM panel és keresse meg a helyi tárolót. A Chrome-ban és a Safari-ban is láthatjuk azt az "Erőforrások" lapon.

Ezután az alábbi adatokat tölthetjük le a tartalom frissítéséhez;

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

A fenti kód azonosítja az elemet newContent a helyi tárolóból, és ha létezik, akkor átadja az értéket a kiválasztott elemnek, ebben az esetben # tartalom 2. Ezen a ponton, amikor frissítjük az oldalt, még mindig meg kell látnunk a módosítást.

• Demó megtekintése
• Letöltés forrása

Végső gondolat

A régi időkben a front-end szerkesztő funkció hozzáadásával, amint azt bemutattuk, akár órákig, akár hetekig tarthat. Ma már csak egy másodpercig tart ez az attribútum, contenteditable.

És a caniuse.com szerint ez az attribútum már támogatott (meglepő módon) az IE7 + rendszerben és (nem meglepő módon) más böngészőkben a következőképpen: Firefox 12, Chrome 20, Safari 5.1 és Opera 12. Ez azt jelenti, hogy ezt az elemet békével tudjuk használni az elme anélkül, hogy régebbi böngészőkre telepíteni kellene a fallbacskot.