Gør websideindhold redigerbar af webstedsbesøg

At gøre teksten på en hjemmeside redigerbar af brugere er nemmere, end du måske forventer. HTML giver en egenskab til dette formål: contenteditable.

Det contenteditable Attribut blev først introduceret i 2014 med udgivelsen af ​​HTML5. Det angiver, om indholdet der reguleres, kan ændres af en site besøgende fra internettet.

Støtte til Contenteditable Attribut

De fleste moderne desktopbrowsere understøtter attributten. Disse omfatter:

• Chrome 4.0 og op
• Internet Explorer 6 og op
• Firefox 3,5 og op
• Safari 3.1 og op
• Opera 10.1 og op
• Microsoft Edge

Det samme gælder for de fleste mobile browsere også.

Sådan bruges Contenteditable

Du skal blot tilføje attributten til HTML-elementet, du vil redigere. Den har tre mulige værdier:rigtigt, falsk og arve. Arve er standardværdien, hvilket betyder, at elementet påtager sig værdien af ​​sin forælder. Ligeledes vil eventuelle børnelementer i dit nyligt redigerbare indhold blive redigeret, medmindre du ændrer deres værdier til falsk. For eksempel at lave en DIV element redigerbare, brug:

Opret en redigerbar opgaveliste med indholdsgivende

Redigerbart indhold giver mest mening, når du parrer det med lokal opbevaring, så indholdet fortsætter mellem sessioner og besøg på stedet.

1. Åbn din side i et HTML-editor.
2. Opret en punktopdelt, uordnet liste med navnet myTasks:
   2. Nogle opgave
   4. En anden opgave
5. Tilføjcontenteditable attribut til
   element:
   Du har nu en opgaveliste, der kan redigeres - men hvis du lukker din browser eller forlader siden, forsvinder din liste. Løsningen: Tilføj et simpelt script for at gemme opgaverne til localStorage.
8. Tilføj et link til jQuery i af dit dokument. Dette eksempel bruger Google CDN, men du kan være vært for det selv eller bruge en anden CDN, hvis du foretrækker det.
11. Nederst på din side, lige over tag, tilføj dit script: Dette er starten på jQuery document.ready funktion og fortæller browseren at indlæse dette script, efter at dokumentet er indlæst fuldt ud.

Inde i document.ready funktion, tilføj dit script for at indlæse opgaverne til localStorage og få de opgaver, der blev gemt der tidligere: $ (document.ready (funktion () {

1. $ ("# myTasks"). blur (funktion () {// når markøren forlader elementet #myTasks
4. localStorage.setItem ('myTasksData', this.innerHTML); // Gem til localStorage
7. });
10. if (localStorage.getItem ('myTasksData')) {// hvis der er indhold i localStorage
13. $ ( "# MyTasks") html (localStorage.getItem ( 'myTasksData')).; // sæt indhold på side
16. }
17. });

HTML for hele siden ser sådan ud:

Mine opgaver

Indtast emner til din liste. Browseren gemmer den for dig, så når du genåbner din browser, vil den stadig være her.

• Nogle opgave
• En anden opgave