HTML5 Contenteditable Attribute Muokkaa Web-sisältöä Front-endissä

Yksi uusista ominaisuuksista HTML5 joka houkutteli minua, on kotimainen editori. Tätä ominaisuutta käytetään yleisesti Sisällönhallintajärjestelmissä, jos haluat muokata sisältöä suoraan selaimesta ja se on yleensä rakennettu kokonaan JavaScriptin ja AJAXin avulla. HTML5 tulee tekemään prosessista hieman helpommin contenteditable ominaisuus.

Mitä se tekee

Kun sitä käytetään mihin tahansa elementtiin, tämä ominaisuus antaa meille mahdollisuuden muokata sisällön sisältö, katsotaan alla olevaa esimerkkiä:

 
Cookie muffinssi croissant. Faworki tanskalainen keksi. Jujubes-jauhe-evästekakku keksi halvah halvah. Keksien gummies hyytelö keksi.
 
Sweet roll tiramisu suklaapatukeri sokeriluu karamellit tuotsie roll karamellit. Suklaakakku wypas puuvillakarkkia. Applicake sesame snaps lakritsin leivonnaiset croissant karamellit fruitcake piparkakku keksi. Donitsi toffee karkkia.
 
 

Tässä esimerkissä olemme lisänneet contenteditable määrite ja aseta se totta niin sisältö muuttuu muokattavaksi. Tähän määritteeseen voidaan lisätä kaksi muuta arvoa;

• väärä joka tekee päinvastoin: sisältöä ei voi muokata
• periä; se muuttaa sisällön muokattavaksi, kun suora vanhempi on myös muokattavissa.

• Näytä demo

Jos olet tarkistanut yllä olevan esittelyn, näet, että sisältöä voidaan muokata suoraan selaimilta. On kuitenkin huomattava, että tämä elementti ei kata tekemiemme muutosten tallentamista, joten kun päivität sivua sen jälkeen, kun olet tehnyt muutoksen, sisältö palautuu.

Miten muutokset tallennetaan

Muutosten tallentaminen riippuu siitä, missä tiedot tallennetaan; yleisesti, se tallennetaan tietokantaan. Mutta koska meillä ei ole tietokantayhteyttä, tässä opetusohjelmassa näytämme, miten muutokset tallennetaan paikallinen varasto. Tätä varten käytämme myös hieman jQueryä koodin yksinkertaistamiseksi. Suosittelen sinua tarkastelemaan Web-sovellusten paikallisen tallennuksen menneisyyttä, läsnäoloa ja tulevaisuutta.

Ensinnäkin lisätään a nappi sisällön vieressä.

 
 
Sweet roll tiramisu suklaapatukeri sokeriluu karamellit tuotsie roll karamellit. Suklaakakku wypas puuvillakarkkia. Applicake sesame snaps lakritsin leivonnaiset croissant karamellit fruitcake piparkakku keksi. Donitsi toffee karkkia.
 
 Tallenna muutokset 

Ajatuksena on, että tallennamme muutokset, kun painiketta napsautetaan. Joten asetetaan tämä tapahtuma käsikirjoituksen kautta;

 var theContent = $ ('# content2'); $ ('# save'). on (napsauta, toiminto () var editedContent = theContent.html (); localStorage.newContent = editedContent;); 

Tämä koodi luo uuden avaimen paikalliseen tallennukseen, joka sisältää viimeisimmän sisällön muutoksen. Voimme käyttää Firebug- tai Developer Tools -työkaluja selvittämään, onko tiedot tallennettu onnistuneesti vai ei, mutta varmista, että painat painiketta. Siirry Firefoxin käyttäjille osoitteeseen DOM paneeli ja etsi paikallista säilytystä. Sekä Chromeissa että Safarissa voimme nähdä sen Resurssit-välilehdessä.

Voimme sitten hakea nämä tiedot sisällön päivittämiseksi seuraavasti;

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

Yllä oleva koodi tunnistaa kohteen newContent paikallisvarastosta ja jos se on olemassa, se siirtää arvon valitulle elementille, tässä tapauksessa # content2.html. Tässä vaiheessa, kun päivitämme sivua, meidän pitäisi silti nähdä tekemämme muutos.

• Näytä demo
• Lataa lähde

Lopullinen ajatus

Vanhoina aikoina lisäämällä edestä päätoimittajan ominaisuus, kuten olimme osoittaneet, voi kestää tunteja tai jopa viikkoja. Nykyään tämä ominaisuus kestää vain sekunnin, contenteditable.

Ja caniuse.comin mukaan tämä ominaisuus on jo tuettu (yllättäen) IE7 +: ssa ja (yllättävän) muissa selaimissa seuraavasti: Firefox 12, Chrome 20, Safari 5.1 ja Opera 12. Tämä tarkoittaa, että voimme käyttää tätä elementtiä rauhassa mielessä ilman fallbacskin asentamista vanhemmille selaimille.