Code Snippet
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;
}
Live demo on JS Bin by Remy Sharp.
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?
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?
in order to make it work with FF too
document.execCommand('undo', false, null); // restore to previus stateHow will I save the output to cookie so if I refresh and or close page the content will still be there.
Thanks
Dan
DigWP
A book and blog co-authored by Jeff Starr and myself about the World's most popular publishing platform.
Quotes on Design
Design, like Art, can be an elusive word to define and an awfully fun thing to have opinions about.
HTML-Ipsum
One-click copy to clipboard access to Lorem Ipsum text that comes wrapped in a variety of HTML.
Bookshelf
Hey Chris, what books do you recommend? These, young fertile mind, these.