Izrada web stranica sadržaja uređivati ​​od strane posjetitelja

Izrada teksta na web stranici koju možete uređivati ​​korisnici lakše je nego što očekujete. HTML daje atribut za tu svrhu: contenteditable.

contenteditable atribut je prvi put uveden 2014. godine izdavanjem HTML5. Određuje hoće li sadržaj posjetitelja web lokacije unutar preglednika mijenjati sadržaj koji upravlja.

Podrška za svojstvo Contenteditable

Većina suvremenih preglednika za stolna računala podržavaju atribut. To uključuje:

• Chrome 4.0 i noviji
• Internet Explorer 6 i noviji
• Firefox 3.5 i noviji
• Safari 3.1 i više
• Opera 10.1 i više
• Microsoft Edge

Isto vrijedi i za većinu mobilnih preglednika.

Kako koristiti Contentable

Jednostavno dodajte atribut HTML elementu kojeg želite urediti. Ima tri moguće vrijednosti:pravi, lažan i nasljediti. nasljediti je zadana vrijednost, što znači da element uzima vrijednost svog roditelja. Isto tako, svi dječji elementi vašeg novog sadržaja koji se može uređivati ​​također će se moći uređivati ​​ako ih ne promijenite lažan, Na primjer, napraviti a DIV element se može uređivati, koristiti:

Izradite popis za uređivanje s sadržajem koji se može uređivati

Sadržaj koji se može uređivati ​​ima najviše smisla kada ga uparite s lokalnom pohranom, tako da sadržaj traje od sesija i posjeta web-lokaciji.

1. Otvorite svoju stranicu u HTML uređivaču.
2. Izradite označeni, neuredan popis s imenima myTasks:
   2. Neki zadatak
   4. Još jedan zadatak
5. Dodajcontenteditable atribut na
   element:
   Sada imate popis obveza koji se može uređivati, no ako zatvorite preglednik ili napustite stranicu, popis će nestati. Rješenje: Dodajte jednostavnu skriptu za spremanje zadataka na localStorage.
8. Dodajte vezu na jQuery u vašeg dokumenta. Ovaj primjer upotrebljava Google CDN, ali ga možete sami ugostiti ili upotrijebiti drugi CDN ako to želite.
11. Na dnu stranice, odmah iznad dodajte svoju skriptu: Ovo je početak jQuery document.ready funkciju i govori pregledniku da učita ovu skriptu nakon što je dokument u potpunosti učitan.

Unutar document.ready dodajte skriptu da biste učitali zadatke u localStorage i preuzeli sve zadatke koji su prethodno spremljeni: $ (document.ready (funkcija () {

1. zamagljivanje (funkcija () {// kada kursor napusti element #myTasks
4. localStorage.setItem ('myTasksData', ovaj.inHTML); // spasiti na localStorage
7. });
10. ako (localStorage.getItem ('myTasksData')) {// ako postoji sadržaj u localStorage
13. $ ( "# MyTasks") HTML (localStorage.getItem ( 'myTasksData')). / / stavite sadržaj na stranicu
16. }
17. });

HTML za cijelu stranicu izgleda ovako:

Moji zadaci

Unesite stavke za svoj popis. Preglednik će ga spremiti za vas, tako da kada ponovno otvorite svoj preglednik, ona će i dalje biti ovdje.

• Neki zadatak
• Još jedan zadatak