HTML5 „Contenteditable“ atributas Redaguoti žiniatinklio turinį „Front-end“

Vienas iš naujų funkcijų HTML5 kuris mane traukia, yra gimtoji „front-end“ redaktorė. Ši funkcija dažniausiai naudojama turinio valdymo sistemose, norint redaguoti turinį tiesiai iš naršyklės ir paprastai sukurta visiškai su „JavaScript“ ir „AJAX“. HTML5 ateina, kad procesas būtų šiek tiek lengviau naudojamas tenkinamas atributas.

Ką tai daro

Kai jis taikomas bet kuriam elementui, šis atributas leis mums Redaguoti turinį, žr. toliau pateiktą pavyzdį:

 Minkšto šokolado pyragas. Faworki daniškas sausainis. Džujubų miltelių sausainių tortas sausainių halvah halva. Sausainių sausainiai.
 Saldaus ritinio tiramisu šokolado baro cukraus slyvų karamelės. Šokoladinis pyragas, vaškiniai, medvilnės saldainiai. Applicake sezamo snaps saldainių konditerijos croissant karamelės vaisių pyragas pipirų pyragas. Spurga saldainiai.

Šiame pavyzdyje pridėjome tenkinamas atributas ir jį nustatykite tiesa todėl turinys tampa redaguojamas. Šiam atributui galima pridėti dvi kitas vertes;

klaidinga priešingai: turinys nebus redaguojamas
paveldėti; jis pakeis turinį, kuris bus redaguojamas, kai tiesioginis tėvas taip pat galima redaguoti.

Peržiūrėti demonstraciją

Jei patikrinote pirmiau pateiktą demonstraciją, galite matyti, kad turinį galima redaguoti tiesiai iš naršyklių. Tačiau reikėtų pažymėti, kad šis elementas neapima mūsų atliktų pakeitimų saugojimo, todėl, kai atnaujinate puslapį po to, kai atlikote pakeitimą, turinys bus grąžintas.

Kaip išsaugoti pakeitimus

Išsaugoti pakeitimus priklauso nuo to, kur mes išsaugosime duomenis; paprastai jis bus išsaugotas duomenų bazėje. Bet kadangi mes neturime prieigos prie duomenų bazės, šiame mokyme mes parodysime, kaip išsaugoti pakeitimus vietinė parduotuvė. Norėdami tai padaryti, mes taip pat naudosime šiek tiek jQuery kodo supaprastinimui. Kaip rekomendaciją rekomenduojame pažvelgti į „Web Application“ vietos saugojimo praeitį, dabartį ir ateitį.

Pirmiausia pridėkime a mygtukas šalia mūsų turinio.

  Saldaus ritinio tiramisu šokolado baro cukraus slyvų karamelės. Šokoladinis pyragas, vaškiniai, medvilnės saldainiai. Applicake sezamo snaps saldainių konditerijos croissant karamelės vaisių pyragas pipirų pyragas. Spurga saldainiai.

Idėja čia yra ta, kad pakeitimus išsaugosime paspaudus mygtuką. Taigi, nustatykite šį įvykį per scenarijų;

 var theContent = $ ('# content2'); $ ('# save') įjungta ('spustelėkite', funkcija () var editedContent = theContent.html (); localStorage.newContent = editedContent;);

Šis kodas sukurs naują raktą vietiniame saugykloje, kuriame bus paskutinis turinio pakeitimas. Mes galime naudoti „Firebug“ arba „Developer Tools“, kad išsiaiškintume, ar duomenys buvo sėkmingai išsaugoti, ar ne, bet įsitikinkite, kad paspausite mygtuką. „Firefox“ naudotojams eikite į DOM ir suraskite vietinį saugyklą. „Chrome“, taip pat „Safari“, jį matome skirtuke „Ištekliai“.

Tada mes galime gauti šiuos duomenis, kad atnaujintume turinį:

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

Viršuje nurodytas kodas nurodys elementą newContent iš vietinio saugyklos ir, jei ji yra, ji perduos vertę pasirinktam elementui, šiuo atveju # content2. Šiuo metu, atnaujindami puslapį, vis tiek turėtume matyti padarytus pakeitimus.

Peržiūrėti demonstraciją
Atsisiųsti šaltinį

Galutinė mintis

Senosiomis dienomis, pridedant „front-end“ redaktoriaus funkciją, kaip buvo įrodyta, gali užtrukti valandų ar netgi savaičių. Šiandien šis požymis trunka tik sekundę, tenkinamas.

Ir, pasak caniuse.com, šis atributas jau yra palaikomas (netikėtai) „IE7 +“ ir (netikėtai) kitose naršyklėse taip: „Firefox 12“, „Chrome 20“, „Safari 5.1“ ir „Opera 12“. Tai reiškia, kad galime naudoti šį elementą su taika nepamirškite „fallbacsk“ senesnėms naršyklėms.