Membuat Kandungan Halaman Web Boleh Disunting oleh Pelawat Laman

Membuat teks di laman web yang boleh diedit oleh pengguna adalah lebih mudah daripada yang anda harapkan. HTML menyediakan atribut untuk tujuan ini: kandungan boleh diubah.

The kandungan boleh diubah sifat pertama kali diperkenalkan pada tahun 2014 dengan pembebasan HTML5. Ia menentukan sama ada kandungan yang dikawalnya itu boleh ditukar oleh pengunjung tapak dari dalam pelayar.

Sokongan untuk Atribut yang Boleh Diperbaharui

Kebanyakan penyemak imbas desktop moden menyokong atribut. Ini termasuk:

• Chrome 4.0 dan ke atas
• Internet Explorer 6 dan ke atas
• Firefox 3.5 dan ke atas
• Safari 3.1 dan ke atas
• Opera 10.1 dan ke atas
• Microsoft Edge

Begitu juga bagi kebanyakan penyemak imbas mudah alih.

Bagaimana Menggunakan Kandungan yang boleh diedit

Cuma tambahkan atribut ke elemen HTML yang ingin anda edit. Ia mempunyai tiga nilai yang mungkin:benar, salah dan mewarisi. Pewarisan adalah nilai lalai, yang bermaksud bahawa elemen mengambil nilai induknya. Begitu juga, elemen kanak-kanak kandungan anda yang baru boleh diedit juga akan diedit melainkan anda mengubah nilai mereka salah. Sebagai contoh, untuk membuat DIV elemen boleh diedit, gunakan:

Buat Senarai Boleh Dicipta Boleh Diubah oleh Kandungan

Kandungan yang boleh diedit menjadikan yang paling masuk akal apabila anda memasangkannya dengan storan setempat, jadi kandungan itu tetap berlaku antara sesi dan lawatan tapak.

1. Buka halaman anda dalam editor HTML.
2. Buat senarai bernombor, tidak teratur yang dinamakan myTasks:
   2. Sesetengah tugas
   4. Satu lagi tugas
5. Tambahkandungan boleh diubah atribut kepada
   elemen:
   Anda kini mempunyai senarai tugasan yang boleh diedit-tetapi jika anda menutup penyemak imbas anda atau meninggalkan halaman, senarai anda akan hilang. Penyelesaiannya: Tambah skrip mudah untuk menyelamatkan tugas ke localStorage.
8. Tambah pautan ke jQuery di dokumen anda. Contoh ini menggunakan CDN Google, tetapi anda boleh menjadi tuan rumah sendiri atau menggunakan CDN yang lain jika anda lebih suka.
11. Di bahagian bawah halaman anda, tepat di atas tag, tambahkan skrip anda: Inilah permulaan jQuery document.ready fungsi dan memberitahu pelayar untuk memuat skrip ini selepas dokumen dimuat sepenuhnya.

Di dalam document.ready fungsi, tambahkan skrip anda untuk memuatkan tugas-tugas ke localStorage dan dapatkan sebarang tugas yang telah disimpan di sana sebelumnya: $ (document.ready (function () {

1. $ ("# myTasks") .blur (function () {// apabila kursor meninggalkan elemen #myTasks
4. localStorage.setItem ('myTasksData', this.innernerHTML); // simpan ke localStorage
7. });
10. jika (localStorage.getItem ('myTasksData')) {// jika terdapat kandungan dalam LocalStorage
13. $ ("# myTasks"). html (localStorage.getItem ('myTasksData')); // masukkan kandungan pada halaman
16. }
17. });

HTML untuk keseluruhan halaman kelihatan seperti ini:

Tugas Saya

Masukkan item untuk senarai anda. Penyemak imbas akan menyimpannya untuk anda, supaya apabila anda membuka semula penyemak imbas anda, ia masih akan berada di sini.

• Sesetengah tugas
• Satu lagi tugas