HTML5 Χαρακτηριστικό ευρεσιτεχνίας Επεξεργασία περιεχομένου ιστού στο Front-end

Ένα από τα νέα χαρακτηριστικά του HTML5 που με προσέλκυσε είναι ο μητρική editor front-end. Αυτή η δυνατότητα εφαρμόζεται συνήθως στα Συστήματα Διαχείρισης Περιεχομένου για την επεξεργασία περιεχομένου απευθείας από το πρόγραμμα περιήγησης και είναι συνήθως κατασκευασμένη πλήρως με JavaScript και AJAX. Το HTML5 έρχεται να κάνει τη διαδικασία λίγο πιο εύκολη χρήση ικανοποιημένοι Χαρακτηριστικό.

Τι κάνει

Όταν εφαρμόζεται σε οποιοδήποτε στοιχείο, αυτό το χαρακτηριστικό θα μας επιτρέψει να επεξεργασία το περιεχόμενο σε αυτό, ας δούμε το παρακάτω παράδειγμα:

 
Μπισκότο κουλουράκι μπισκότων. Factoryi μπισκότο της Δανίας. Jujubes μπισκότο κέικ σκόνη μπισκότα halvah halvah. Μπισκότα από μαστίχα από μπισκότα.
 
Γλυκό ρολό tiramisu σοκολάτα μπαρ ζάχαρη δαμάσκηνο καραμέλες tootsie ρολό καραμέλες. Σοκολάτα κέικ wypas ζαχαρωτό γλυκό παγωμένο. Εφαρμοσμένο σουσάμι σφραγίζει γλυκόριζα ζαχαροπλαστικής κρουασάν καραμέλα φρουτώδες μπισκότο μελόψωμο. Ντόνατ καμπαρίνι καραμέλα.
 
 

Σε αυτό το παράδειγμα, έχουμε προσθέσει ικανοποιημένοι και να το ορίσετε αληθής έτσι το περιεχόμενο γίνεται επεξεργάσιμο. Υπάρχουν δύο άλλες τιμές που μπορούν να προστεθούν για αυτό το χαρακτηριστικό.

• ψευδής που κάνει το αντίθετο: το περιεχόμενο δεν θα είναι επεξεργάσιμο
• κληρονομώ. θα μετατρέψει το περιεχόμενο επεξεργάσιμο όταν το άμεσος γονέας είναι επεξεργάσιμη επίσης.

• Προβολή επίδειξης

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

Πώς να αποθηκεύσετε τις αλλαγές

Η αποθήκευση των αλλαγών εξαρτάται από το πού αποθηκεύουμε τα δεδομένα. συνήθως, θα αποθηκευτεί σε μια βάση δεδομένων. Επειδή όμως δεν έχουμε πρόσβαση σε βάση δεδομένων, σε αυτό το σεμινάριο, θα σας δείξουμε πώς μπορείτε να αποθηκεύσετε τις αλλαγές localStorage. Για να γίνει αυτό, θα χρησιμοποιήσουμε επίσης ένα κομμάτι jQuery για να καταστήσουμε τον κώδικα απλούστερο. Σας συνιστώ να ρίξετε μια ματιά στο The Past, Present & Future της Τοπικής Αποθήκευσης για Εφαρμογές Web ως περαιτέρω αναφορά.

Πρώτα απ 'όλα, ας προσθέσουμε ένα κουμπί δίπλα στο περιεχόμενό μας.

 
 
Γλυκό ρολό tiramisu σοκολάτα μπαρ ζάχαρη δαμάσκηνο καραμέλες tootsie ρολό καραμέλες. Σοκολάτα κέικ wypas ζαχαρωτό γλυκό παγωμένο. Εφαρμοσμένο σουσάμι σφραγίζει γλυκόριζα ζαχαροπλαστικής κρουασάν καραμέλα φρουτώδες μπισκότο μελόψωμο. Ντόνατ καμπαρίνι καραμέλα.
 
 Αποθήκευσε τις αλλαγές 

Η ιδέα εδώ είναι ότι θα αποθηκεύσουμε τις αλλαγές μόλις πατήσουμε το κουμπί. Έτσι, ας θέσουμε αυτό το συμβάν μέσω του σεναρίου.

 var theContent = $ ('# content2'); $ ('# save') στο ('κλικ', λειτουργία () var editedContent = theContent.html (); localStorage.newContent = editedContent) 

Αυτός ο κώδικας θα δημιουργήσει ένα νέο κλειδί στο localStorage που περιέχει την τελευταία αλλαγή που έγινε στο περιεχόμενο. Μπορούμε να χρησιμοποιήσουμε τα Firebug ή τα Εργαλεία για Προγραμματιστές για να διευκρινίσουμε αν τα δεδομένα έχουν αποθηκευτεί με επιτυχία ή όχι, αλλά βεβαιωθείτε ότι έχετε πατήσει το κουμπί. Για τους χρήστες του Firefox, μεταβείτε στο DOM και αναζητήστε το localStorage. Στο Chrome, καθώς και στο Safari, μπορούμε να το δούμε κάτω από την καρτέλα "Πόροι".

Στη συνέχεια, μπορούμε να ανακτήσουμε αυτά τα δεδομένα για την ενημέρωση του περιεχομένου, ως εξής:

 if (localStorage.getItem ('newContent')) theContent.html (localStorage.getItem ('newContent')).  

Ο παραπάνω κωδικός θα προσδιορίσει το στοιχείο newContent από το localStorage και αν υπάρχει, θα περάσει την τιμή στο επιλεγμένο στοιχείο, στην περίπτωση αυτή # content2. Σε αυτό το σημείο, όταν ανανεώνουμε τη σελίδα, θα πρέπει να δούμε ακόμα την αλλαγή που κάναμε.

• Προβολή επίδειξης
• Λήψη πηγής

Τελική σκέψη

Στις παλιές ημέρες, η προσθήκη του χαρακτηριστικού επεξεργασίας front-end, όπως είχαμε δείξει, μπορεί να διαρκέσει ώρες ή ίσως και εβδομάδες. Σήμερα, παίρνει μόνο ένα δευτερόλεπτο με αυτό το χαρακτηριστικό, ικανοποιημένοι.

Και, σύμφωνα με το caniuse.com, αυτό το χαρακτηριστικό υποστηρίζεται ήδη (κατά εκπληκτικό τρόπο) στο IE7 + και (μη εκπληκτικά) σε άλλα προγράμματα περιήγησης ως εξής: Firefox 12, Chrome 20, Safari 5.1 και Opera 12. Αυτό σημαίνει ότι μπορούμε να χρησιμοποιήσουμε αυτό το στοιχείο με ειρήνη του μυαλού χωρίς να χρειάζεται να ρυθμίσετε το fallbacsk για τα παλαιότερα προγράμματα περιήγησης.