Lagring af indholdsredigerbart indhold Ændres som JSON med Ajax - CSS-tricks

Elementer med contenteditableattributten kan redigeres direkte i browservinduet. Men selvfølgelig påvirker disse ændringer ikke det faktiske dokument på din server, så disse ændringer fortsætter ikke med en sideopdatering.

En måde at gemme data på ville være at vente på, at der trykkes på returtasten, som udløser derefter sender den nye indre HTML af elementet som et Ajax-opkald og slører elementet. Ved at trykke på flugt vender elementet tilbage til dets forudredigerede tilstand.

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 Pen Contenteditable / Save with JSON / Ajax af Chris Coyier (@chriscoyier) på CodePen.