Αποθήκευση αλλαγών περιεχομένου με δυνατότητα επεξεργασίας ως JSON με Ajax - CSS-Κόλπα

Τα στοιχεία με το contenteditableχαρακτηριστικό μπορούν να επεξεργαστούν ζωντανά στο παράθυρο του προγράμματος περιήγησης. Αλλά φυσικά αυτές οι αλλαγές δεν επηρεάζουν το πραγματικό έγγραφο στον διακομιστή σας, επομένως αυτές οι αλλαγές δεν παραμένουν με ανανέωση σελίδας.

Ένας τρόπος για να αποθηκεύσετε τα δεδομένα θα ήταν να περιμένετε να πατηθεί το πλήκτρο επιστροφής, το οποίο ενεργοποιεί στη συνέχεια στέλνει το νέο innerHTML του στοιχείου ως κλήση Ajax και θολώνει το στοιχείο. Το πάτημα της διαφυγής επιστρέφει το στοιχείο στην προεπεξεργασμένη του κατάσταση.

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 with JSON / Ajax του Chris Coyier (@chriscoyier) στο CodePen.