Atribut Edit HTML5 Atribut Edit Kandungan Web Di Hadapan

Salah satu ciri baru dalam HTML5 yang menarik saya adalah editor front-end orang asli. Ciri ini biasanya digunakan dalam Sistem Pengurusan Kandungan untuk mengedit kandungan secara langsung dari penyemak imbas dan biasanya dibina sepenuhnya dengan JavaScript dan AJAX. HTML5 datang untuk membuat proses lebih mudah menggunakannya kandungan boleh diubah atribut.

Apa ia lakukan

Apabila diterapkan pada mana-mana elemen, atribut ini akan membolehkan kami edit kandungan di dalamnya, mari lihat contoh di bawah:

 Cookie muffin croissant. Biskut Faworki danish. Jujubes serbuk cookie kek biskuit halvah halvah. Biskut gusi biskut jeli.
 Gulung manis tiramisu coklat bar gula caramels tootsie roll caramels. Coklat kek wypas kapas gula-gula. Aplikasikan sesame snaps cawan manis croissant caramels fruitcake gingerbread biscuit. Tong gula-gula toffee donat.

Dalam contoh ini, kami telah menambah kandungan boleh diubah atribut dan tetapkannya benar jadi kandungan menjadi boleh diedit. Terdapat dua nilai lain yang boleh ditambah untuk atribut ini;

salah yang tidak bertentangan: kandungan tidak akan diedit
mewarisi; ia akan menjadikan kandungan disunting apabila ibu bapa terus boleh disunting juga.

Lihat Demo

Jika anda telah menyemak demo di atas, anda dapat melihat kandungan itu boleh disunting terus dari pelayar. Walau bagaimanapun, perlu diingatkan bahawa elemen ini tidak melindungi penyimpanan perubahan yang kami buat, jadi apabila anda memuat semula halaman selepas anda membuat perubahan, kandungan akan dikembalikan.

Cara Simpan Perubahan

Menyimpan perubahan bergantung kepada tempat kami menyimpan data; biasanya, ia akan disimpan dalam pangkalan data. Tetapi kerana kami tidak mempunyai akses pangkalan data, dalam tutorial ini, kami akan menunjukkan kepada anda bagaimana untuk menyimpan perubahan dalam localStorage. Untuk berbuat demikian, kami juga akan menggunakan sedikit jQuery untuk menjadikan kod itu lebih mudah. Saya cadangkan anda melihat Penyimpanan Tempatan, Kini & Masa Depan untuk Aplikasi Web sebagai rujukan lebih lanjut.

Pertama sekali, mari kita tambah butang bersebelahan dengan kandungan kami.

  Gulung manis tiramisu coklat bar gula caramels tootsie roll caramels. Coklat kek wypas kapas gula-gula. Aplikasikan sesame snaps cawan manis croissant caramels fruitcake gingerbread biscuit. Tong gula-gula toffee donat.

Idea di sini ialah kami akan menyimpan perubahan sebaik sahaja butang diklik. Jadi, mari kita tetapkan peristiwa ini melalui skrip;

 var theContent = $ ('# content2'); $ ('# save') pada ('klik', fungsi () var editedContent = theContent.html (); localStorage.newContent = editedContent;);

Kod ini akan mencipta kunci baru dalam localStorage yang mengandungi perubahan terakhir yang dibuat dalam kandungan. Kita boleh menggunakan Firebug atau Alat Pembangun untuk menjelaskan sama ada data telah berjaya disimpan atau tidak, tetapi pastikan anda menekan butang tersebut. Untuk pengguna Firefox, pergi ke DOM panel dan cari localStorage. Di Chrome serta Safari, kami dapat melihatnya di bawah tab 'Sumber'.

Kami kemudian boleh mengambil data ini untuk mengemas kini kandungan, seperti berikut;

 jika (localStorage.getItem ('newContent')) theContent.html (localStorage.getItem ('newContent'));

Kod di atas akan mengenal pasti item tersebut newContent dari LocalStorage dan jika ia wujud, ia akan lulus nilai kepada elemen yang dipilih, dalam kes ini # content2. Pada ketika ini, apabila kita menyegarkan halaman, kita masih harus melihat perubahan yang kita buat.

Lihat Demo
Muat turun Sumber

Pemikiran Akhir

Di zaman dahulu, menambah ciri editor hadapan seperti yang telah kami tunjukkan, boleh mengambil masa beberapa jam atau mungkin beberapa minggu lagi. Hari ini, hanya diperlukan satu saat dengan atribut ini, kandungan boleh diubah.

Dan, menurut caniuse.com, atribut ini telah disokong, (menghairankan) di IE7 + dan (tidak mengejutkan) di pelayar lain seperti berikut: Firefox 12, Chrome 20, Safari 5.1 dan Opera 12. Ini bermakna kita boleh menggunakan unsur ini dengan damai fikiran tanpa perlu menubuhkan fallbacsk untuk pelayar lama.