HTML5 Contenteditable Attribute Rediģēt tīmekļa saturu priekšpusē

Viena no jaunajām funkcijām HTML5 kas mani piesaistīja, ir vietējais front-end redaktors. Šī funkcija parasti tiek izmantota satura pārvaldības sistēmās, lai rediģētu saturu tieši no pārlūkprogrammas un parasti tā pilnībā tiek veidota ar JavaScript un AJAX. HTML5 nāk, lai padarītu procesu mazliet vieglāku apmierinošs atribūts.

Ko tas dara

Piemērojot jebkuru elementu, šis atribūts ļaus mums rediģēt saturu tajā, skatīsimies zemāk redzamo piemēru:

 Sīkdatnes smalkmaizītes kruasāns. Faworki dāņu cepums. Jujubes pulvera sīkfailu kūka cepumu halvah halvah. Cepumu gummies želejas cepums.
 Salds roll tiramisu šokolādes bārs cukura plūmju karameles. Šokolādes kūka wypas vates konfektes apledojums. Applicake sezama snaps lakricas mīklas croissant karameles augļu kūka piparkūkas cepums. Donut toffee konfektes spieķi.

Šajā piemērā mēs esam pievienojuši apmierinošs atribūtu un iestatiet to taisnība lai saturs kļūst rediģējams. Šim atribūtam var pievienot divas citas vērtības;

nepatiesa tas ir pretējs: saturs netiks rediģēts
mantot; tas pārvērš saturu rediģējamu, kad tiešais vecāks ir rediģējams.

Skatīt demonstrāciju

Ja esat pārbaudījis iepriekš minēto demonstrāciju, varat redzēt, ka saturu var rediģēt tieši no pārlūkprogrammām. Tomēr jāatzīmē, ka šis elements neattiecas uz mūsu veikto izmaiņu glabāšanu, tāpēc, atjaunojot lapu pēc izmaiņu veikšanas, saturs tiks atjaunots.

Kā saglabāt izmaiņas

Izmaiņu saglabāšana ir atkarīga no tā, kur mēs saglabāsim datus; parasti tā tiks saglabāta datu bāzē. Bet, tā kā mums nav datubāzes piekļuves, šajā apmācībā mēs parādīsim, kā saglabāt izmaiņas localStorage. Lai to izdarītu, mēs arī izmantosim nedaudz jQuery, lai padarītu kodu vienkāršāku. Es ieteiktu jums apskatīt Web lietojumprogrammu vietējās uzglabāšanas pagātni, tagadni un nākotni.

Pirmkārt, pievienosim a poga blakus mūsu saturam.

  Salds roll tiramisu šokolādes bārs cukura plūmju karameles. Šokolādes kūka wypas vates konfektes apledojums. Applicake sezama snaps lakricas mīklas croissant karameles augļu kūka piparkūkas cepums. Donut toffee konfektes spieķi.

Ideja šeit ir tāda, ka mēs saglabāsim izmaiņas, tiklīdz klikšķīs uz pogas. Tātad, pieņemsim šo notikumu, izmantojot skriptu;

 var theContent = $ ('# content2'); $ ('# save') ir ieslēgts ('klikšķis', funkcija () var editedContent = theContent.html (); localStorage.newContent = editedContent;);

Šis kods izveidos jaunu atslēgu vietējā uzglabāšanā, kurā būs pēdējās izmaiņas saturā. Mēs varam izmantot Firebug vai izstrādātāju rīkus, lai noskaidrotu, vai dati ir veiksmīgi saglabāti vai nav, bet pārliecinieties, ka jūs piespiežat pogu. Firefox lietotājiem dodieties uz DOM panelis un meklējiet vietējo krātuvi. Chrome, kā arī Safari, to var redzēt cilnē “Resursi”.

Pēc tam mēs varam iegūt šos datus, lai atjauninātu saturu šādi;

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

Iepriekš minētais kods identificēs objektu newContent no vietējā krātuves un, ja tā ir, tā nodos vērtību izvēlētajam elementam, šajā gadījumā # saturs2. Šajā brīdī, kad mēs atsvaidzinām lapu, mums joprojām vajadzētu redzēt mūsu izdarītās izmaiņas.

Skatīt demonstrāciju
Lejupielādēt avotu

Galīgā doma

Vecajās dienās, pievienojot priekšpuses redaktora funkciju, kā mēs to pierādījām, var paiet stundas vai pat nedēļas. Šodien šis atribūts aizņem tikai sekundi, apmierinošs.

Un, saskaņā ar caniuse.com, šis atribūts jau ir atbalstīts (pārsteidzoši) IE7 + un citos pārlūkos (nepārsteidzoši) šādi: Firefox 12, Chrome 20, Safari 5.1 un Opera 12. Tas nozīmē, ka mēs varam izmantot šo elementu ar mieru prātā, neuzstādot fallbacsk vecākām pārlūkprogrammām.