Δημιουργία περιεχομένου ιστοσελίδων που μπορεί να τροποποιηθεί από τους επισκέπτες του ιστότοπου

Κάνοντας το κείμενο σε έναν ιστότοπο επεξεργάσιμο από τους χρήστες είναι πιο εύκολο από ό, τι θα περίμενε κανείς. Το HTML παρέχει ένα χαρακτηριστικό για το σκοπό αυτό: ικανοποιημένοι.

ο ικανοποιημένοι Το χαρακτηριστικό εισήχθη για πρώτη φορά το 2014 με την έκδοση του HTML5. Καθορίζει αν το περιεχόμενο που διέπει μπορεί να αλλάξει από έναν επισκέπτη τοποθεσίας μέσα από το πρόγραμμα περιήγησης.

Υποστήριξη του χαρακτηριστικού Contenteditable

Τα περισσότερα σύγχρονα προγράμματα περιήγησης desktop υποστηρίζουν το χαρακτηριστικό. Αυτά περιλαμβάνουν:

• Chrome 4.0 και άνω
• Internet Explorer 6 και επάνω
• Firefox 3.5 και πάνω
• Safari 3.1 και πάνω
• Opera 10.1 και πάνω
• Microsoft Edge

Το ίδιο ισχύει και για τα περισσότερα προγράμματα περιήγησης για κινητά.

Πώς να χρησιμοποιήσετε το Contenteditable

Απλά προσθέστε το χαρακτηριστικό στο στοιχείο HTML που θέλετε να επεξεργαστείτε. Έχει τρεις πιθανές τιμές:αληθής, ψευδής και κληρονομώ. Κληρονομώ είναι η προεπιλεγμένη τιμή, που σημαίνει ότι το στοιχείο παίρνει την τιμή της μητρικής του. Ομοίως, οποιαδήποτε παιδικά στοιχεία του πρόσφατα επεξεργάσιμου περιεχομένου σας θα είναι επίσης επεξεργάσιμα αν δεν αλλάξετε τις αξίες τους ψευδής. Για παράδειγμα, για να κάνετε ένα DIV στοιχείο επεξεργάσιμο, χρησιμοποιήστε:

Δημιουργία μιας επεξεργάσιμης λίστας υποχρεώσεων με ευελιξία

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

1. Ανοίξτε τη σελίδα σας σε έναν επεξεργαστή HTML.
2. Δημιουργία μιας ομαδοποιημένης λίστας με κουκκίδες με όνομα myTasks:
   2. Κάποια εργασία
   4. Μια άλλη εργασία
5. Πρόσθεσε τοικανοποιημένοι αποδίδει στο
   στοιχείο:
   Τώρα έχετε μια λίστα εργασιών που είναι επεξεργάσιμη - αλλά εάν κλείσετε το πρόγραμμα περιήγησης ή αφήσετε τη σελίδα, η λίστα σας θα εξαφανιστεί. Η λύση: Προσθέστε ένα απλό σενάριο για να αποθηκεύσετε τις εργασίες στο localStorage.
8. Προσθέστε ένα σύνδεσμο στο jQuery στο του εγγράφου σας. Αυτό το παράδειγμα χρησιμοποιεί το Google CDN, αλλά μπορείτε να το φιλοξενήσετε μόνοι σας ή να χρησιμοποιήσετε άλλο CDN, αν προτιμάτε.
11. Στο κάτω μέρος της σελίδας σας, ακριβώς πάνω από το ετικέτα, προσθέστε το σενάριό σας: Αυτή είναι η αρχή του jQuery document.ready και ενημερώνει το πρόγραμμα περιήγησης για να φορτώσει αυτό το σενάριο μετά την πλήρη φόρτωση του εγγράφου.

μεσα στην document.ready , προσθέστε το σενάριό σας για να φορτώσετε τις εργασίες στο localStorage και να πάρετε οποιεσδήποτε εργασίες που αποθηκεύτηκαν εκεί προηγουμένως: $ (document.ready (function () {

1. $ ("# myTasks"). θολή (λειτουργία () {// όταν ο δρομέας εγκαταλείπει το στοιχείο #myTasks
4. localStorage.setItem ('myTasksData', this.innerHTML); // αποθηκεύστε στο localStorage
7. });
10. αν (localStorage.getItem ('myTasksData')) {// αν υπάρχει περιεχόμενο στο localStorage
13. $ ("# myTasks"). html (localStorage.getItem ('myTasksData')). // βάλτε περιεχόμενο στη σελίδα
16. }
17. });

Το HTML για ολόκληρη τη σελίδα μοιάζει με αυτό:

Οι εργασίες μου

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

• Κάποια εργασία
• Μια άλλη εργασία