Zapisywanie edytowalnych zmian zawartości jako JSON z Ajax - CSS-Tricks

Elementy z contenteditableatrybutem można edytować na żywo bezpośrednio w oknie przeglądarki. Ale oczywiście te zmiany nie wpływają na rzeczywisty dokument na twoim serwerze, więc te zmiany nie są trwałe przy odświeżaniu strony.

Jednym ze sposobów zapisania danych byłoby oczekiwanie na naciśnięcie klawisza powrotu, który wyzwala następnie wysłanie nowego innerHTML elementu jako wywołanie Ajax i zaciera element. Naciśnięcie klawisza Escape przywraca element do stanu wstępnie edytowanego.

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; )

Zobacz Pen Contenteditable / Save with JSON / Ajax autorstwa Chrisa Coyiera (@chriscoyier) w CodePen.