使用 Ajax 将 Contenteditable 内容更改保存为 JSON

带有 contenteditable 属性的元素可以在浏览器窗口中进行实时编辑。但当然，这些更改不会影响服务器上的实际文档，因此这些更改不会在页面刷新后保留。

一种保存数据的方法是等待按下回车键，然后触发发送元素的新 innerHTML 作为 Ajax 调用并使元素失去焦点。按 Esc 键将元素恢复到编辑前的状态。

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

查看 CodePen 上 Chris Coyier (@chriscoyier) 编写的 Contenteditable / Save with JSON/Ajax。