Saving contenteditable Content Changes as JSON with Ajax

Elements with the contenteditable attribute can be live-edited right in the browser window. But of course those changes don't affect the actual document on your server, so those changes don't persist with a page refresh.

One way to save the data would be to wait for the return key to be pressed, which triggers then sends the new innerHTML of the element as an Ajax call and blurs the element. Pressing escape returns the element to it's pre-edited state.

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

See the Pen Contenteditable / Save with JSON/Ajax by Chris Coyier (@chriscoyier) on CodePen.

Comments

  1. User Avatar
    Schart
    Permalink to comment#

    I don’t get how to save this to the server? I tried just removing the comment signs to make the ajax work, but no luck. Anyone?

  2. User Avatar
    Alok Saldanha
    Permalink to comment#

    What if the user pressed undo(ctrl-z or apple-z)? Then the contenteditable element is restored to its former state, but the reversion is not persisted to the database. Is there a cross-platform way to detect this?

  3. User Avatar
    Saša
    Permalink to comment#

    in order to make it work with FF too

    document.execCommand('undo', false, null); // restore to previus state

  4. User Avatar
    Dan
    Permalink to comment#

    How will I save the output to cookie so if I refresh and or close page the content will still be there.

    Thanks

    Dan

  5. User Avatar
    Jacopo
    Permalink to comment#

    Can I listen also for mouse click out of the editable content?

  6. User Avatar
    nizam
    Permalink to comment#

    hey i am trying to store the result to databse but when i retreive the result it outputs without any formats only as a simple plain text .I am using php could any one help me,
    Thanks in advance

  7. User Avatar
    Morten
    Permalink to comment#

    1) Why would one want to blur afterwards
    2) Why is everybody linking to that weird JS Bin – which does NOT woe ?

  8. User Avatar
    Roman llgr
    Permalink to comment#

    Please update DEMO

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag