Сохранение контента, доступного для контента, как JSON с Ajax онлайн урок.


Элементы с атрибутомcontenteditableможно редактировать в прямом окне браузера. Но, конечно, эти изменения не влияют на фактический документ на вашем сервере, поэтому эти изменения не сохраняются при обновлении страницы.

Одним из способов сохранения данных было бы дождаться нажатия клавиши возврата, которая затем запускает новый внутренний HTTML элемента как вызов Ajax и размывает элемент. Нажатие escape возвращает элемент в его предварительно отредактированное состояние.

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

См. Pen Contenteditable Save с JSON Ajax Крисом Койером ( @chriscoyier ) на CodePen .