Den Webseiteninhalt für Site-Besucher bearbeitbar machen

Es ist einfacher als Sie erwarten, den Text auf einer Website für Benutzer bearbeitbar zu machen. HTML stellt für diesen Zweck ein Attribut bereit: inhaltlich editierbar.

Das inhaltlich editierbar Attribut wurde erstmals im Jahr 2014 mit der Veröffentlichung von HTML5 eingeführt. Es gibt an, ob der von ihm kontrollierte Inhalt von einem Websitebesucher im Browser geändert werden kann.

Unterstützung für das Contenteditable-Attribut

Die meisten modernen Desktop-Browser unterstützen das Attribut. Diese schließen ein:

Chrome 4.0 und höher
Internet Explorer 6 und höher
Firefox 3.5 und höher
Safari 3.1 und höher
Opera 10.1 und höher
Microsoft Edge

Das gilt auch für die meisten mobilen Browser.

So verwenden Sie Contenteditable

Fügen Sie das Attribut einfach dem HTML-Element hinzu, das Sie bearbeitbar machen möchten. Es gibt drei mögliche Werte:wahr, falsch und erben. Erben ist der Standardwert, dh das Element nimmt den Wert seines übergeordneten Elements an. Ebenso können alle untergeordneten Elemente Ihres neu bearbeitbaren Inhalts bearbeitet werden, es sei denn, Sie ändern ihre Werte in falsch. Zum Beispiel, um eine DIV Element editierbar, verwenden Sie:

Erstellen Sie eine bearbeitbare Aufgabenliste mit editierbarem Inhalt

Bearbeitbarer Inhalt ist am sinnvollsten, wenn Sie ihn mit lokalem Speicher koppeln. Der Inhalt bleibt also zwischen Sitzungen und Website-Besuchen erhalten.

Öffnen Sie Ihre Seite in einem HTML-Editor.
Erstellen Sie eine Liste mit Aufzählungszeichen und ungeordneter Liste meine Aufgaben: Eine Aufgabe Eine andere Aufgabe


Ergänzen Sie dieinhaltlich editierbar Attribut zum

 Element: 

 Sie haben jetzt eine To-Do-Liste, die bearbeitet werden kann. Wenn Sie jedoch Ihren Browser schließen oder die Seite verlassen, wird Ihre Liste ausgeblendet. Die Lösung: Fügen Sie ein einfaches Skript hinzu, um die Aufgaben in localStorage zu speichern.


Fügen Sie einen Link zu jQuery im hinzu 
 Ihres Dokuments.  In diesem Beispiel wird das Google-CDN verwendet, Sie können es jedoch selbst hosten oder ein anderes CDN verwenden, wenn Sie dies bevorzugen.


Am unteren Rand Ihrer Seite, direkt über dem Tag, fügen Sie Ihr Skript hinzu:  Dies ist der Beginn der jQuery document.ready Funktion und weist den Browser an, dieses Skript zu laden, nachdem das Dokument vollständig geladen wurde.


In der document.ready Funktion, fügen Sie Ihr Skript hinzu, um die Aufgaben in localStorage zu laden und alle Aufgaben zu erhalten, die zuvor dort gespeichert wurden: $ (document.ready (Funktion () {

 $ ("# myTasks"). blur (function () {// wenn der Cursor das #myTasks -Element verlässt 
 
 
 localStorage.setItem ('myTasksData', this.innerHTML); // In localStorage speichern
  
 
 });
  
 
 if (localStorage.getItem ('myTasksData')) {// wenn im localStorage Inhalt vorhanden ist
  
 
 $ ("# myTasks"). html (localStorage.getItem ('myTasksData')); // Inhalt auf die Seite stellen
  
 
 }
  });

Der HTML-Code für die gesamte Seite sieht folgendermaßen aus:

Meine Aufgaben

`Meine Aufgaben`



Geben Sie Elemente für Ihre Liste ein. Der Browser speichert es für Sie. Wenn Sie Ihren Browser erneut öffnen, ist er immer noch hier.


Eine Aufgabe

Eine andere Aufgabe