Anda dapat membuat teks di dalam elemen HTML apa pun dapat diedit dengan menambahkan atribut contenteditable.
Hey, I'm
like a textarea kinda now!
Saya tidak akan mengatakan ada gerobak penuh dengan kasing untuk itu, tapi rapi. Satu kemungkinan penggunaan mungkin adalah desain yang sedang berlangsung di mana pengeditan konten dari desain itu sendiri berguna baik untuk Anda, atau untuk orang lain (klien?) Yang perlu mengubah teks.
Sangat bagus, dapat diedit. Sekarang seseorang dapat mengklik ke dalam teks dan mengeditnya.
Tidak ada yang permanen tentang perubahan itu. Refresh halaman, lihat di browser lain atau apa pun. Pengeditan itu hilang.
Katakanlah Anda ingin melakukan pekerjaan yang sedikit lebih baik dan melakukan perubahan secara terus-menerus. Anda tidak mencoba membangun CMS di sini, atau menyimpan data melalui koneksi terotentikasi ke database atau apa pun. Anda hanya ingin mengedit teks dipertahankan jika halaman diperbarui.
Salah satu caranya adalah membuang data dari perubahan teks yang Anda buat ke localStorage.
Ketika teks diedit (pada blur elemen), simpan data ke localStorage menggunakan namespace dan
ID elemen sebagai kunci.
Saat halaman dimuat
melalui Penyimpanan lokal dan lihat apakah ada kunci yang cocok dengan elemen pada halaman dan, jika demikian, ganti konten.
const editables = document.querySelectorAll("[contenteditable]"); // save edits
editables.forEach(el => { el.addEventListener("blur", () =>
{ localStorage.setItem("dataStorage-" + el.id, el.innerHTML); }) }); // once
on load for (var key in localStorage) { if (key.includes("dataStorage-"))
{ const id = key.replace("dataStorage-",""); document.querySelector("#" + id).innerHTML = localStorage.getItem(key); } }
Ini mengingatkan saya pada beberapa hal lain ...
document.designMode = "on" seperti jalan pintas untuk membuat setiap elemen pada halaman berperilaku seperti itu dapat diedit.
Mavo sedikit seperti konsep ini hanya dengan otentikasi, opsi penyimpanan data yang benar, dan mengedit UI.
Jika kinerja menjadi masalah, penyimpanan KV seharusnya menjadi versi async yang lebih cepat dari penyimpanan lokal.
Share This :
0 komentar