Göra webbsidans innehåll redigerbart av webbplatsbesökare

Att göra texten på en webbplats redigerbar av användare är lättare än du kan förvänta dig. HTML ger ett attribut för detta ändamål: content.

De content Attributet introducerades först 2014 med utgåvan av HTML5. Det anger om innehållet det styrs kan ändras av en webbplatsbesökare från webbläsaren.

Stöd för Contenteditable Attribut

De flesta moderna stationära webbläsare stöder attributet. Dessa inkluderar:

• Chrome 4.0 och uppåt
• Internet Explorer 6 och uppåt
• Firefox 3,5 och uppåt
• Safari 3.1 och uppåt
• Opera 10.1 och uppåt
• Microsoft Edge

Detsamma gäller också de flesta mobila webbläsare.

Så här använder du Contenteditable

Lägg bara till attributet till HTML-elementet som du vill redigera. Den har tre möjliga värden:Sann, falsk och ärva. Ärva är standardvärdet, vilket innebär att elementet tar på sig värdet av dess förälder. På samma sätt kan eventuella barnelement i ditt nyligen redigerbara innehåll redigeras om du inte ändrar deras värden till falsk. Till exempel, för att göra en DIV element redigerbar, använd:

Skapa en redigerbar att göra-lista med contenteditable

Redigerbart innehåll ger mest mening när du kopplar det med lokal lagring, så innehållet kvarstår mellan sessioner och besök på webbplatsen.

1. Öppna din sida i en HTML-editor.
2. Skapa en punktlös, oordnad lista med namnet mina uppgifter:
   2. En del uppgift
   4. En annan uppgift
5. Lägg tillcontent attribut till
   element:
   Du har nu en att göra-lista som kan redigeras - men om du stänger webbläsaren eller lämnar sidan kommer din lista att försvinna. Lösningen: Lägg till ett enkelt skript för att spara uppgifterna till localStorage.
8. Lägg till en länk till jQuery i av ditt dokument. I det här exemplet används Google CDN, men du kan vara värd det själv eller använda en annan CDN om du föredrar det.
11. Längst ner på sidan, precis ovanför tagg, lägg till ditt skript: Detta är början på jQuery document.ready funktionen och berättar att webbläsaren laddar upp det här skriptet efter att dokumentet har laddats helt.

Inuti document.ready funktion, lägg till ditt skript för att ladda upp uppgifterna till localStorage och få några uppgifter som sparades där tidigare: $ (document.ready (funktion () {

1. $ ("# myTasks"). oskärpa (funktion () {// när markören lämnar elementet #myTasks
4. localStorage.setItem ('myTasksData', this.innerHTML); // spara till localStorage
7. });
10. om (localStorage.getItem ('myTasksData')) {// om det finns innehåll i localStorage
13. $ ( "# MyTasks") html (localStorage.getItem (myTasksData ')). // sätta innehåll på sidan
16. }
17. });

HTML för hela sidan ser så här ut:

Mina uppgifter

Ange objekt för din lista. Webbläsaren lagrar den för dig så att när du öppnar din webbläsare kommer den fortfarande vara här.

• En del uppgift
• En annan uppgift