Speichern von contenteditable-Inhaltsänderungen als JSON mit Ajax

Elemente mit dem Attribut contenteditable können direkt im Browserfenster live bearbeitet werden. Aber natürlich wirken sich diese Änderungen nicht auf das eigentliche Dokument auf Ihrem Server aus, sodass diese Änderungen beim Aktualisieren der Seite nicht erhalten bleiben.

Eine Möglichkeit, die Daten zu speichern, wäre, auf das Drücken der Eingabetaste zu warten, was dann die neue innerHTML des Elements als Ajax-Aufruf auslöst und das Element ausblendet. Durch Drücken der Escape-Taste wird das Element in seinen vor der Bearbeitung befindlichen Zustand zurückversetzt.

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 / Speichern mit JSON/Ajax von Chris Coyier (@chriscoyier) auf CodePen.