Spara innehållsredigerbart innehåll Ändras som JSON med Ajax - CSS-tricks

Element med contenteditableattributet kan redigeras direkt i webbläsarfönstret. Men naturligtvis påverkar inte dessa ändringar det faktiska dokumentet på din server, så dessa ändringar kvarstår inte med en siduppdatering.

Ett sätt att spara data skulle vara att vänta på att returknappen trycks ned, vilken utlöser sedan skickar elementets nya innerHTML som ett Ajax-samtal och suddar elementet. Genom att trycka på fly återgår elementet till det förredigerade tillståndet.

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

Se pennan Contenteditable / Save with JSON / Ajax av Chris Coyier (@chriscoyier) på CodePen.