Atribut HTMLable Contenteditable Edit Konten Web Di Front-end
Salah satu fitur baru di HTML5 yang menarik saya adalah editor front-end asli. Fitur ini biasanya diterapkan dalam Sistem Manajemen Konten untuk mengedit konten langsung dari browser dan biasanya dibangun sepenuhnya dengan JavaScript dan AJAX. HTML5 hadir untuk membuat prosesnya sedikit lebih mudah digunakan dapat diedit atribut.
Apa yang dilakukannya
Ketika diterapkan ke elemen apa pun, atribut ini akan memungkinkan kita untuk sunting konten di dalamnya, mari kita lihat contoh di bawah ini:
Kue muffin croissant. Biskuit Denmark faworki. Kue bubuk Jujubes kue biskuit halvah halvah. Biskuit, permen, biskuit, jeli.
Manis gulam tiramisu cokelat batang gula karamel tootsie roll karamel. Kue coklat wypas icing permen kapas. Applicake wijen snaps liquorice pastry croissant karamel fruitcake gingerbread biskuit. Tongkat permen toffee donat.
Dalam contoh ini, kami telah menambahkan dapat diedit atribut dan atur benar sehingga konten menjadi dapat diedit. Ada dua nilai lain yang dapat ditambahkan untuk atribut ini;
Salahyang melakukan sebaliknya: konten tidak akan dapat dieditmewarisi; itu akan mengubah konten yang dapat diedit ketika induk langsung dapat diedit juga.
- Lihat Demo
Jika Anda telah memeriksa demo di atas, Anda dapat melihat bahwa konten dapat diedit langsung dari browser. Namun perlu dicatat bahwa elemen ini tidak mencakup penyimpanan perubahan yang kami buat, jadi ketika Anda me-refresh halaman setelah Anda membuat perubahan, konten akan kembali.
Cara Menyimpan Perubahan
Menyimpan perubahan tergantung di mana kami akan menyimpan data; umumnya, itu akan disimpan dalam database. Tetapi karena kami tidak memiliki akses basis data, dalam tutorial ini, kami akan menunjukkan kepada Anda bagaimana cara menyimpan perubahan di penyimpanan lokal. Untuk melakukannya, kita juga akan menggunakan sedikit jQuery untuk membuat kode lebih sederhana. Saya merekomendasikan Anda untuk melihat Masa Lalu, Sekarang & Masa Depan Penyimpanan Lokal untuk Aplikasi Web sebagai referensi lebih lanjut.
Pertama-tama, mari kita tambahkan tombol di sebelah konten kami.
Manis gulam tiramisu cokelat batang gula karamel tootsie roll karamel. Kue coklat wypas icing permen kapas. Applicake wijen snaps liquorice pastry croissant karamel fruitcake gingerbread biskuit. Tongkat permen toffee donat.
Idenya di sini adalah bahwa kita akan menyimpan perubahan begitu tombol diklik. Jadi, mari kita atur acara ini melalui skrip;
var theContent = $ ('# content2'); $ ('# save'). on ('click', function () var editedContent = theContent.html (); localStorage.newContent = editedContent;); Kode ini akan membuat kunci baru di Penyimpanan lokal yang berisi perubahan terakhir yang dibuat dalam konten. Kami dapat menggunakan Firebug atau Alat Pengembang untuk mengklarifikasi apakah data telah berhasil disimpan atau tidak, tetapi pastikan Anda menekan tombol. Untuk pengguna Firefox, buka DOM panel dan cari Penyimpanan lokal. Di Chrome dan Safari, kita bisa melihatnya di bawah tab 'Sumber Daya'.
Kami kemudian dapat mengambil data ini untuk memperbarui konten, sebagai berikut;
if (localStorage.getItem ('newContent')) theContent.html (localStorage.getItem ('newContent')); Kode di atas akan mengidentifikasi item konten baru dari penyimpanan lokal dan jika ada, itu akan meneruskan nilai ke elemen yang dipilih, dalam hal ini # content2. Pada titik ini, ketika kita menyegarkan halaman, kita masih harus melihat perubahan yang kita buat.
- Lihat Demo
- Sumber Unduhan
Pemikiran Akhir
Di masa lalu, menambahkan fitur editor front-end seperti yang telah kami tunjukkan, dapat berlangsung berjam-jam atau bahkan berminggu-minggu. Hari ini, hanya dibutuhkan satu detik dengan atribut ini, dapat diedit.
Dan, menurut caniuse.com, atribut ini sudah didukung, (secara mengejutkan) di IE7 + dan (tidak mengejutkan) di browser lain sebagai berikut: Firefox 12, Chrome 20, Safari 5.1 dan Opera 12. Itu berarti kita dapat menggunakan elemen ini dengan damai pikiran tanpa harus mengatur fallbacsk untuk browser lama.
