Speichern von inhaltsbearbeitbaren Inhaltsänderungen als JSON mit Ajax - CSS-Tricks

Elemente mit dem contenteditableAttribut können direkt im Browserfenster live bearbeitet werden. Diese Änderungen wirken sich jedoch natürlich nicht auf das tatsächliche Dokument auf Ihrem Server aus, sodass diese Änderungen bei einer Seitenaktualisierung nicht bestehen bleiben.

Eine Möglichkeit zum Speichern der Daten besteht darin, auf das Drücken der Eingabetaste zu warten, wodurch das neue innerHTML des Elements als Ajax-Aufruf gesendet und das Element verwischt wird. Durch Drücken von Escape wird das Element in den vorbearbeiteten Zustand zurückgesetzt.

document.addEventListener('keydown', function (event) ( var esc = event.which == 27, nl = event.which == 13, el = event.target, input = el.nodeName != 'INPUT' && el.nodeName != 'TEXTAREA', data = (); if (input) ( if (esc) ( // restore state document.execCommand('undo'); el.blur(); ) else if (nl) ( // save data(el.getAttribute('data-name')) = el.innerHTML; // we could send an ajax request to update the field /* $.ajax(( url: window.location.toString(), data: data, type: 'post' )); */ log(JSON.stringify(data)); el.blur(); event.preventDefault(); ) ) ), true); function log(s) ( document.getElementById('debug').innerHTML = 'value changed to: ' + s; )

Siehe den Stift Contenteditable / Save with JSON / Ajax von Chris Coyier (@chriscoyier) auf CodePen.