HTML5-editierbares Attribut zum Bearbeiten von Webinhalten im Front-End

Eine der neuen Funktionen in HTML5 Das hat mich angezogen, der native Frontend-Editor. Diese Funktion wird häufig in Content Management-Systemen zur Bearbeitung von Inhalten direkt über den Browser angewendet und ist in der Regel vollständig mit JavaScript und AJAX erstellt. HTML5 erleichtert die Verwendung von HTML5 inhaltlich editierbar Attribut.

Was es macht

Wenn dieses Attribut auf ein beliebiges Element angewendet wird, können wir dies tun bearbeiten den Inhalt darin sehen wir das Beispiel unten:

 
Plätzchen-Muffin-Croissant. Faworki dänischer Keks. Jujubepulverplätzchenkuchen-Keks halvah halvah. Keks-Gummibärchen-Gelee-Keks.
 
Sweet Roll Tiramisu Schokoriegel Zucker Pflaume Karamellen Tootsie Roll Karamellen. Zuckerwattezuckerglasur der Schokoladenkuchenwypas. Sesamschnaps Lakritzgebäck Croissant Karamellen Obstkuchen Lebkuchen Keks. Donut-Toffee-Zuckerstangen.
 
 

In diesem Beispiel haben wir hinzugefügt inhaltlich editierbar Attribut und setzen Sie es wahr So wird der Inhalt bearbeitbar. Für dieses Attribut können zwei weitere Werte hinzugefügt werden.

• falsch Das Gegenteil: Der Inhalt kann nicht bearbeitet werden
• erben; Der Inhalt kann dann bearbeitet werden, wenn die direkter Elternteil ist auch editierbar.

• Demo anzeigen

Wenn Sie die obige Demo ausgecheckt haben, können Sie sehen, dass der Inhalt direkt in den Browsern bearbeitet werden kann. Es sollte jedoch beachtet werden, dass dieses Element nicht das Speichern der vorgenommenen Änderungen abdeckt. Wenn Sie also die Seite aktualisieren, nachdem Sie die Änderung vorgenommen haben, wird der Inhalt wiederhergestellt.

So speichern Sie die Änderungen

Das Speichern von Änderungen hängt davon ab, wo wir die Daten speichern werden. Normalerweise wird es in einer Datenbank gespeichert. Da wir jedoch keinen Datenbankzugriff haben, zeigen wir Ihnen in diesem Tutorial, wie Sie die Änderungen speichern lokaler Speicher. Dazu verwenden wir ein wenig jQuery, um den Code zu vereinfachen. Ich empfehle Ihnen, sich die Vergangenheit, Gegenwart und Zukunft des lokalen Speichers für Webanwendungen als weitere Referenz anzusehen.

Als Erstes fügen wir ein Taste neben unserem inhalt.

 
 
Sweet Roll Tiramisu Schokoriegel Zucker Pflaume Karamellen Tootsie Roll Karamellen. Zuckerwattezuckerglasur der Schokoladenkuchenwypas. Sesamschnaps Lakritzgebäck Croissant Karamellen Obstkuchen Lebkuchen Keks. Donut-Toffee-Zuckerstangen.
 
 Änderungen speichern 

Die Idee hier ist, dass wir die Änderungen speichern, sobald Sie auf die Schaltfläche klicken. Lassen Sie uns dieses Ereignis durch das Skript festlegen.

 var theContent = $ ('# content2'); $ ('# save'). on ('click', function () var editContent = theContent.html (); localStorage.newContent = editContent;); 

Dieser Code erstellt einen neuen Schlüssel in localStorage, der die letzte inhaltliche Änderung enthält. Wir können die Firebug- oder Entwicklertools verwenden, um zu klären, ob die Daten erfolgreich gespeichert wurden oder nicht. Stellen Sie jedoch sicher, dass Sie auf die Schaltfläche klicken. Für Firefox-Benutzer gehen Sie zu DOM Panel und suchen Sie nach localStorage. Sowohl in Chrome als auch in Safari können Sie es auf der Registerkarte "Ressourcen" sehen.

Wir können diese Daten dann abrufen, um den Inhalt wie folgt zu aktualisieren:

 if (localStorage.getItem ('newContent')) theContent.html (localStorage.getItem ('newContent'));  

Der Code oben identifiziert den Artikel neuer Inhalt von localStorage, und wenn dieser existiert, wird der Wert in diesem Fall an das ausgewählte Element übergeben # content2. Wenn wir zu diesem Zeitpunkt die Seite aktualisieren, sollten wir immer noch die Änderung sehen, die wir vorgenommen haben.

• Demo anzeigen
• Quelle herunterladen

Letzter Gedanke

In der Vergangenheit konnte das Hinzufügen der Front-End-Editor-Funktion, wie wir es gezeigt hatten, Stunden oder sogar Wochen dauern. Heute dauert es mit diesem Attribut nur eine Sekunde, inhaltlich editierbar.

Laut caniuse.com wird dieses Attribut bereits (überraschenderweise) in IE7 + und (nicht überraschend) in anderen Browsern wie folgt unterstützt: Firefox 12, Chrome 20, Safari 5.1 und Opera 12. Das bedeutet, dass wir dieses Element mit Ruhe verwenden können ohne dass Fallbacsk für ältere Browser eingerichtet werden muss.