Atributul HTML5 modificat Editează conținutul Web pe Front-end

Una din noile caracteristici din HTML5 care m-au atras este editorul nativ de front-end. Această caracteristică este frecvent aplicată în sistemele de gestionare a conținutului pentru a edita conținutul direct din browser și este de obicei construită pe deplin cu JavaScript și AJAX. HTML5 vine să facă acest proces un pic mai ușor de utilizat contenteditable atribut.

Ce face

Când este aplicat oricărui element, acest atribut ne va permite Editați | × conținutul din acesta, să vedem exemplul de mai jos:

 Cookie croissant brioșă. Factoryi biscuit danez. Jujubes pudră de tort biscuit cookie halvah halvah. Biscuiți de gem biscuite de jeleu.
 Dulce roșu tiramisu ciocolată bar de zahăr prune caramel tootsie role caramel. Ciocolată tort wypas glazură bomboane de bumbac. Cereale de susan snaps băuturi dulciuri caramelă croissant fructe dulciuri biscuiti. Donut bomboane bomboane.

În acest exemplu, am adăugat contenteditable atribuiți și setați-l Adevărat astfel încât conținutul devine editabil. Există două alte valori care pot fi adăugate pentru acest atribut;

fals care face contrariul: conținutul nu va fi editat
moşteni; acesta va transforma conținutul editabil atunci când direct părinte este și editabil.

Vizualizați demonstrația

Dacă ați verificat demo-ul de mai sus, puteți vedea că conținutul poate fi editat direct din browsere. Cu toate acestea, trebuie remarcat faptul că acest element nu acoperă stocarea modificărilor pe care le-am făcut, astfel că atunci când actualizați pagina după ce ați făcut modificarea, conținutul va reveni.

Cum se salvează modificările

Salvarea modificărilor depinde de locul în care vom stoca datele; de obicei, acesta va fi salvat într-o bază de date. Dar, deoarece nu avem acces la baze de date, în acest tutorial, vă vom arăta cum să salvați modificările localStorage. Pentru a face acest lucru, vom folosi și un pic de jQuery pentru a simplifica codul. Vă recomandăm să aruncați o privire la trecutul, prezentul și viitorul spațiului de stocare local pentru aplicații web ca referință ulterioară.

Mai întâi de toate, să adăugăm a buton lângă conținutul nostru.

  Dulce roșu tiramisu ciocolată bar de zahăr prune caramel tootsie role caramel. Ciocolată tort wypas glazură bomboane de bumbac. Cereale de susan snaps băuturi dulciuri caramelă croissant fructe dulciuri biscuiti. Donut bomboane bomboane.

Ideea este că vom stoca modificările odată ce butonul este apăsat. Deci, să stabilim acest eveniment prin scenariu;

 var theContent = $ ('# content2'); $ ('# save') pe ('click', function () var editedContent = theContent.html (); localStorage.newContent = editedContent;);

Acest cod va crea o nouă cheie în localStorage care conține ultima modificare efectuată în conținut. Putem folosi Firebug sau Tools Developer pentru a clarifica dacă datele au fost stocate cu succes sau nu, dar asigurați-vă că ați apăsat butonul. Pentru utilizatorii de Firefox, mergeți la DOM și căutați localStorage. În Chrome și în Safari, îl putem vedea în fila "Resurse".

Putem apoi să preluăm aceste date pentru a actualiza conținutul, după cum urmează;

 dacă (localStorage.getItem ('newContent')) theContent.html (localStorage.getItem ('newContent'));

Codul de mai sus va identifica elementul conținut nou din localStorage și dacă există, va trece valoarea la elementul selectat, în acest caz # content2. În acest moment, când actualizăm pagina, ar trebui să vedem în continuare schimbarea pe care am făcut-o.

Vizualizați demonstrația
Descărcați sursa

Gândirea finală

În vremurile vechi, adăugarea funcției editorului de față, așa cum am demonstrat, poate dura ore sau chiar săptămâni. Astăzi, acest atribut durează doar o secundă, contenteditable.

Și, în conformitate cu caniuse.com, acest atribut este deja suportat (în mod surprinzător) în IE7 + și (în mod surprinzător) în alte browsere după cum urmează: Firefox 12, Chrome 20, Safari 5.1 și Opera 12. Asta înseamnă că putem folosi acest element cu pace de minte fără a fi nevoie să configurați fallbacsk pentru browserele mai vechi.