Webpagina-inhoud maken die door sitebezoekers kan worden bewerkt

De tekst op een website bewerkbaar maken door gebruikers is gemakkelijker dan u zou verwachten. HTML biedt hiervoor een attribuut: contenteditable.

De contenteditable kenmerk is voor het eerst geïntroduceerd in 2014 met de release van HTML5. Het specificeert of de inhoud die het beheert kan worden gewijzigd door een bezoeker van de site vanuit de browser.

Ondersteuning voor het kenmerk Contenteditable

De meeste moderne desktopbrowsers ondersteunen het kenmerk. Waaronder:

Chrome 4.0 en hoger
Internet Explorer 6 en hoger
Firefox 3.5 en hoger
Safari 3.1 en hoger
Opera 10.1 en hoger
Microsoft Edge

Hetzelfde geldt voor de meeste mobiele browsers.

Hoe Contenteditable te gebruiken

Voeg eenvoudig het kenmerk toe aan het HTML-element dat u bewerkbaar wilt maken. Het heeft drie mogelijke waarden:waar, vals en erven. Erven is de standaardwaarde, wat betekent dat het element de waarde van het bovenliggende element aanneemt. Evenzo kunnen alle onderliggende elementen van uw nieuw bewerkbare inhoud worden bewerkt, tenzij u hun waarden wijzigt in vals. Bijvoorbeeld om een te maken DIV element bewerkbaar, gebruik:

Maak een bewerkbare takenlijst met Contenteditable

Bewerkbare inhoud is het meest logisch als u deze combineert met lokale opslag, zodat de inhoud blijft bestaan tussen sessies en sitebezoeken.

Open uw pagina in een HTML-editor.
Maak een genummerde, ongeordende lijst met de naam mijn taken: Enige taak Een andere taak


Voeg de toecontenteditable toeschrijven aan de

 element: 

 U hebt nu een takenlijst die kan worden bewerkt, maar als u uw browser sluit of de pagina verlaat, verdwijnt uw lijst. De oplossing: voeg een eenvoudig script toe om de taken op te slaan in localStorage.


Voeg een link toe aan jQuery in de 
 van uw document.  In dit voorbeeld wordt het Google CDN gebruikt, maar u kunt het zelf hosten of een andere CDN gebruiken als u dat wilt.


Onder aan uw pagina, net boven de label, voeg je script toe:  Dit is het begin van de jQuery document.ready functioneert en vertelt de browser om dit script te laden nadat het document volledig is geladen.


Binnen in de document.ready functie, voeg je script toe om de taken in localStorage te laden en ontvang alle taken die daar eerder zijn opgeslagen: $ (document.ready (function () {

 $ ("# myTasks"). vervagen (functie () {// wanneer de cursor het element #myTasks verlaat 
 
 
 localStorage.setItem ('myTasksData', this.innerHTML); // opslaan in localStorage
  
 
 });
  
 
 if (localStorage.getItem ('myTasksData')) {// als er inhoud is in de localStorage
  
 
 $ ( "# MyTasks") html (localStorage.getItem ( 'myTasksData')).; // zet inhoud op pagina
  
 
 }
  });

De HTML voor de hele pagina ziet er als volgt uit:

Mijn taken

`Mijn taken`



Voer items in voor uw lijst. De browser bewaart deze voor u, zodat wanneer u uw browser opnieuw opent, deze hier nog steeds zal zijn.


Enige taak

Een andere taak