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.
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?
Take a peek here , I made some simple changes that allow you to read/write directly to an HTML file the contentEditable changes from any named
<div class='editable'>
tag, I put the code up on GitHub, here’s a full explanation,http://www.abrandao.com/2019/12/saving-contenteditable-html-using-php/
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 state
How will I save the output to cookie so if I refresh and or close page the content will still be there.
Thanks
Dan
Can I listen also for mouse click out of the editable content?
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
1) Why would one want to blur afterwards
2) Why is everybody linking to that weird JS Bin – which does NOT woe ?
Please update DEMO
Here you go:
http://codepen.io/chriscoyier/pen/LVEdJg
“keydown” event, like “input” event behaves strangely (for my taste) when there are multiple contenteditable elements, which are nested.
For example, if I add contenteditable attribute to the “body”, it will break this demo code. This is because “event.target” in this case will be body since it is a more senior contenteditable ancestor. So if you have multiple contenteditable elements on your page, you should be careful that none of them are nested.
Source: https://developer.mozilla.org/en-US/docs/Web/Events/input
Still work in 2018. Best and clean contentEditable listener to save changes on the fly and not be annoyed with enter and esc default behaviors. I used this to save changes on dataTable. Thanks man!
Is there any IDE that does this locally. I’m asking for a friend that wants to edit a bootstrap template.