Alat pengembang · HTML WYSIWYG editor
DOM Dijelaskan untuk Editor: Mengapa HTML Adalah Pohon, Bukan File Teks
· Latar belakang
html dom contenteditable
Memperkenalkan Model Objek Dokumen untuk non-pemrogram, yang mencakup aturan bersarang, elemen induk dan anak, dan cara browser memperbaiki sarang yang tidak valid, untuk menjelaskan perilaku editor yang tampak sewenang-wenang.
Mengapa <p> Anda menutup sendiri — terbuka dengan markup yang berubah setelah ditempel
Sebuah paragraf bisa tampak tertutup atau berpindah setelah sebuah fragmen melewati editor karena pohon yang dihasilkan—bukan jaringan karakter asli penulis—adalah yang paling penting. ToolAcre menambahkan transformasi lain: ia memberi token dan menulis ulang sumber turunan browser di bawah daftar yang diizinkannya sendiri.
Ketika sumber berubah, tanyakan tahap mana yang mengubahnya. Browser mungkin telah memutasi DOM yang dapat diedit, atau pembersih mungkin telah memetakan alias, membuka bungkusan simpul, atau menyeimbangkan tag yang diterima. Menyebut setiap perbedaan sebagai “browser memperbaikinya” menyembunyikan batasan penting ini.
Kotak di dalam kotak — memperkenalkan model pohon dengan contoh singkat
Bayangkan elemen sebagai kotak yang dihubungkan oleh hubungan orangtua-anak. Dalam `<p>Read <strong>carefully</strong>.</p>`, p adalah induk teks, kuat dan lebih banyak teks; kuat adalah induk dari kata hati-hati. Indentasi sumber dapat mengilustrasikan pohon tetapi tidak menciptakan hubungan.
Pemformat cantik ToolAcre menempatkan wadah blok pada baris dan menjaga elemen tetap sejajar dengan teks di sekitarnya. Daftar menerima baris li yang menjorok ke dalam. Format ini untuk membaca keluaran yang sudah disanitasi. Model sebenarnya tetap berisi elemen dan node teks, terlepas dari apakah sumbernya kompak atau tersebar di seluruh baris.
Penyarangan yang diizinkan diseimbangkan oleh penulis ulang ToolAcre; model konten browser lebih luas
HTML mendefinisikan model konten yang jauh lebih luas dan rinci dibandingkan kebijakan editor ini. ToolAcre mengizinkan kumpulan tertentu tetapi tidak memvalidasi setiap aturan sarang semantik. Tumpukannya memastikan penutupan yang baik di antara tag yang diizinkan; itu bukan bukti bahwa setiap hubungan yang dihasilkan HTML ideal untuk suatu tujuan.
Misalnya, sebuah daftar harus berisi item daftar yang sesuai, namun tumpukan generik dapat mempertahankan kombinasi yang tidak biasa yang diizinkan karena ini bukan validator skema. Penulis harus membuat judul, paragraf, dan daftar yang masuk akal melalui toolbar atau sumber yang ditinjau, kemudian memvalidasi berdasarkan persyaratan tujuan ketika kebenaran adalah konsekuensinya.
ToolAcre memperbaiki tag yang diterima dengan tumpukan, bukan algoritma penguraian HTML yang lengkap
Browser menerapkan algoritma penguraian HTML lengkap dengan pemulihan kesalahan. ToolAcre tidak menerapkannya kembali. Tokenizernya mengenali struktur yang dibutuhkan oleh daftar yang diizinkan, dan penulisnya menutup elemen dalam yang diterima ketika tag akhir bersilangan muncul. Ini menjatuhkan penutupan yang menyimpang dan menutup sisa pembukaan di akhir.
Sumber secara eksplisit menyebutkan perbedaan parser sebagai alasan untuk tidak memperlakukan modul sebagai filter XSS masukan bermusuhan umum. Browser dapat menafsirkan string yang sengaja diubah bentuknya secara berbeda. Sandbox pratinjau memberikan batas independen pada eksekusi di dalam ToolAcre, sementara server masih memerlukan sanitasi yang sesuai dengan HTML5.
Node teks dan spasi — menjelaskan mengapa ada spasi dan jeda baris di antara tag di pohon
Teks antar elemen menjadi token teks, termasuk karakter spasi. Pemformat cantik menciutkan spasi biasa di luar pra, sementara konten pra dipertahankan dengan tepat. Konversi teks biasa menyisipkan baris baru setelah akhiran blok dan untuk br, lalu mengurangi jaringan baris kosong yang berlebihan.
Oleh karena itu, spasi berpartisipasi secara berbeda di setiap tahap. Spasi visual dapat berasal dari teks, br, batas blok atau CSS. Periksa node dan karakter daripada memperlakukan setiap celah yang terlihat sebagai margin. Pembersih dapat menormalkan pemformatan spasi tanpa mengubah kata-kata yang dilihat pembaca.
Contoh praktis: menelusuri catatan dua paragraf dengan daftar — membaca markup yang dihasilkan sebagai pohon, mengidentifikasi orang tua dan anak-anak
Bangun `<h2>Checklist</h2><p>Read <strong>carefully</strong>.</p><ul><li>Source</li><li>Preview</li></ul>`. Fragmen tersebut memiliki tiga turunan elemen tingkat akar. Paragrafnya berisi teks dan kuat; daftar berisi dua anak li, masing-masing dengan teks.
Beralih dari sumber ke visual dan sebaliknya. Pohon yang diizinkan harus tetap seimbang, dan mode cantik akan menempatkan judul dan paragraf pada baris sambil membuat indentasi item daftar. Latihan ini dikendalikan; itu tidak menunjukkan setiap masukan yang salah atau jalur perbaikan browser.
Yang tidak tercakup di sini — pemrograman JavaScript DOM atau model kotak CSS
Artikel ini tidak mengajarkan pemrograman JavaScript DOM, pengamat mutasi, API Seleksi, atau model kotak CSS. Pohon elemen dan pohon kotak tata letak terkait tetapi tidak identik. Ia juga tidak mengklaim daftar token tulisan tangan adalah browser DOM.
Tidak ada kesimpulan keamanan umum yang dihasilkan dari pohon yang rapi. Penyerang dapat menargetkan perbedaan penguraian dan URL, itulah sebabnya pemfilteran keluaran, pratinjau kotak pasir, dan sanitasi server tetap berbeda. Gunakan model pohon untuk mempertimbangkan struktur, bukan untuk mengabaikan tinjauan keamanan sistem penerima.
Kesimpulan: berpikir di pohon - merangkum model mental dan bagaimana hasil markupnya ToolAcre'S HTML WYSIWYG editor menunjukkan pohon yang sedang Anda bangun
Berpikirlah di pepohonan ketika perilaku visual tampak sewenang-wenang. Identifikasi simpul induk, turunan, dan teks yang Anda inginkan, lalu bandingkan dengan sumber yang difilter. ToolAcre menjadikan pemeriksaan ini praktis dengan memasangkan draf yang dapat diedit konten dengan fragmen yang dapat ditulis ulang dan dapat dibaca.
Model mental yang kuat juga mengungkapkan batasan: div yang tidak terbungkus kehilangan induknya, skrip yang dihapus kehilangan subpohonnya, dan b menjadi kuat. Ketika transformasi tersebut terlihat jelas, koreksi menjadi keputusan struktural, bukan dorongan visual berulang yang markupnya masih belum diketahui.