Gjør websideinnhold redigerbar av besøkende på nettstedet

Å gjøre teksten på et nettsted redigerbar av brukere er enklere enn du kanskje forventer. HTML gir et attributt til dette formålet: contenteditable.

De contenteditable Attributtet ble først introdusert i 2014 med utgivelsen av HTML5. Det spesifiserer om innholdet det styrer, kan endres av en besøkende fra nettstedet i nettleseren.

Støtte for Contenteditable Attribute

De fleste moderne desktop-nettlesere støtter attributtet. Disse inkluderer:

• Chrome 4.0 og oppover
• Internet Explorer 6 og nyere
• Firefox 3.5 og nyere
• Safari 3.1 og oppover
• Opera 10.1 og oppover
• Microsoft Edge

Det samme gjelder for de fleste mobile nettlesere også.

Hvordan bruke Contenteditable

Bare legg til attributtet til HTML-elementet du vil gjøre redigerbare. Den har tre mulige verdier:ekte, falsk og arve. Arve er standardverdien, noe som betyr at elementet tar på seg verdien av sin overordnede. På samme måte vil eventuelle barnelementer i ditt nylig redigerbare innhold også bli redigerbart, med mindre du endrer sine verdier til falsk. For eksempel å lage en DIV element redigerbar, bruk:

Opprett en redigerbar gjøremålsliste med innholdsrettbar

Redigerbart innhold gir mest mening når du kobler sammen det med lokal lagring, slik at innholdet vedvarer mellom økter og nettstedbesøk.

1. Åpne siden din i et HTML-editor.
2. Opprett en punktliste, uordnet liste som heter myTasks:
   2. Noen oppgave
   4. En annen oppgave
5. Legg tilcontenteditable attributt til
   element:
   Du har nå en oppgaveliste som kan redigeres - men hvis du lukker nettleseren din eller forlater siden, forsvinner listen din. Løsningen: Legg til et enkelt skript for å lagre oppgavene til localStorage.
8. Legg til en lenke til jQuery i av dokumentet ditt. Dette eksemplet bruker Google CDN, men du kan være vert for det selv eller bruk en annen CDN hvis du foretrekker det.
11. På bunnen av siden din, like over tag, legg til skriptet ditt: Dette er starten på jQuery document.ready funksjonen og forteller at nettleseren skal laste dette skriptet etter at dokumentet har lastet fullt ut.

Inne i document.ready funksjon, legg til skriptet ditt for å laste oppgavene til localStorage og få alle oppgaver som ble lagret der tidligere: $ (document.ready (funksjon () {

1. $ ("# myTasks"). uskarphet (funksjon () {// når markøren forlater elementet #myTasks
4. localStorage.setItem ('myTasksData', this.innerHTML); // lagre til localStorage
7. });
10. hvis (localStorage.getItem ('myTasksData')) {// hvis det er innhold i lokalStorage
13. $ ( "# MyTasks") html (localStorage.getItem ( 'myTasksData').); // sett innhold på side
16. }
17. });

HTML for hele siden ser slik ut:

Mine oppgaver

Skriv inn elementer for listen din. Nettleseren lagrer den for deg, slik at når du åpner nettleseren din, vil den fortsatt være her.

• Noen oppgave
• En annen oppgave