Tips for ContentEditables – Blog Andy Benaam

13 September 2022 [JavaScript, Programming]

Saya telah bekerja sedikit dengan tag yang dapat diedit di HTML saya, dan belajar beberapa hal, jadi di sinilah mereka.

UPDATE: Lihat juga demo saya tentang cara memilih teks dengan berbagai cara dalam hal yang dapat diedit.

Mengapa saya tidak bisa melihat kursor di dalam konten yang kosong?

Jika Anda membuat div yang dapat diedit seperti ini:

<div contenteditable="true">
</div>

Dan kemudian mencoba untuk memfokuskannya, kadang -kadang, di beberapa browser, Anda tidak akan melihat kursor.

Anda dapat memperbaikinya dengan menambahkan tag
:

<div contenteditable="true">
<br />
</div>

Sekarang Anda harus mendapatkan kursor dan bisa mengedit teks di dalam.

Memilih teks secara terprogram di dalam yang dapat diedit

Cukup sulit untuk membuat browser memilih apa pun. Inilah resep cepat untuk itu:

<div id="ce" contenteditable="true">
Some text here
</div>
<script>
const ce = document.getElementById("ce");
const sel = document.getSelection();
self.setBaseAndExtent(ce.firstChild, 6, ce.lastChild, 10);
</script>

Ini memilih karakter 6 hingga sebelum-10, yaitu kata “teks”. Untuk memilih barang yang lebih rumit di dalam tag dll. Anda perlu menemukan node DOM yang sebenarnya untuk masuk ke setStart dan setend, yang cukup rumit.

Setiap kali Anda setHTML pada yang dapat diedit, tambahkan tag BR

Jika Anda menggunakan setHTML pada yang dapat diatasi, Anda harus selalu menambahkan
di akhir. Itu tidak muncul dengan cara apa pun, dan itu mencegah masalah aneh.

Terutama, jika Anda ingin memiliki garis kosong di akhir teks Anda, Anda perlu dua
Tag, seperti ini:

<div id="ce" contenteditable="true">
Some text here
</div>
<script>
const ce = document.getElementById("ce");
ce.innerHTML = "a<br /><br />"
</script>

Jika Anda hanya menyertakan satu tag BR, tidak akan ada garis kosong di akhir.

Memilih akhir dari sebuah yang dapat diedit

Sangat sulit untuk menempatkan kursor di akhir div yang dapat diedit, tetapi di sini ada resep yang berfungsi:

const range = document.createRange();
range.selectNodeContents(ce);
range.collapse();
const sel = document.getSelection();
sel.removeAllRanges();
sel.addRange(range);

(Di mana CE adalah div yang dapat diedit kami.)

Catatan: Ini tidak akan berhasil jika Anda tidak menambahkan tag BR di akhir, seperti yang dijelaskan di atas!

UPDATE: Waspadalah terhadap Newline di Sumber HTML Anda

CATATAN: Bukan tag
, tetapi Newline yang sebenarnya di sumber HTML Anda, dapat menyebabkan perilaku aneh, terutama di sekitar pilihan.

Misalnya, jika div Anda berakhir dengan garis baru, Anda tidak dapat memilih ujungnya dengan melakukan ini:

const sel = document.getSelection();
sel.selectAllChildren(editor);
sel.collapseToEnd();

Di atas akan bekerja (letakkan kursor Anda di akhir teks) jika tidak ada garis baru di sumbernya, tetapi tidak berfungsi (buat kursor Anda menghilang atau melompat ke kanan div) jika ada garis baru.

Jadi, jika Anda secara terprogram menghasilkan HTML, saya sarankan untuk menghapus spasi putih “asing” jika Anda bisa.

Lebih banyak tips?

Ada lagi tips? Jatuhkan di komentar dan saya akan memasukkannya.