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

Χρησιμοποιώντας το χαρακτηριστικό Contenteditable

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

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

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

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

Αυτά περιλαμβάνουν:

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

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

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

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

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

  1. Ανοίξτε τη σελίδα σας σε έναν επεξεργαστή HTML.
  2. Δημιουργήστε μια λίστα με κουκκίδες με αστερίσκο με το όνομα myTasks :

    • Κάποια εργασία
    • Άλλη εργασία
  1. Προσθέστε το χαρακτηριστικό contenteditable στο στοιχείο
      :
      Τώρα έχετε μια λίστα εργασιών που είναι επεξεργάσιμη - αλλά εάν κλείσετε το πρόγραμμα περιήγησης ή αφήσετε τη σελίδα, η λίστα σας θα εξαφανιστεί. Η λύση: Προσθέστε ένα απλό σενάριο για να αποθηκεύσετε τις εργασίες στο localStorage.
    • Προσθέστε ένα σύνδεσμο στο jQuery στο του εγγράφου σας.