Alat pembangun · HTML WYSIWYG editor
DOM Dijelaskan untuk Editor: Mengapa HTML Adalah Pokok, Bukan Fail Teks
· Latar belakang
html dom boleh diedit kandungan
Memperkenalkan Model Objek Dokumen untuk bukan pengaturcara, meliputi peraturan bersarang, elemen induk dan anak, dan cara pelayar membaiki sarang yang tidak sah, untuk menerangkan tingkah laku editor yang nampaknya sewenang-wenangnya.
Mengapa <p> anda ditutup sendiri — dibuka dengan penanda yang berubah selepas tampalan
Perenggan boleh kelihatan ditutup atau bergerak selepas serpihan melalui editor kerana pokok yang terhasil—bukan urutan watak asal pengarang—adalah yang paling penting. ToolAcre menambah satu lagi transformasi: ia menandakan dan menulis semula sumber terbitan pelayar di bawah senarai kebenarannya sendiri.
Apabila sumber berubah, tanya peringkat mana yang mengubahnya. Pelayar mungkin telah mengubah DOM yang boleh diedit kandungan, atau pembersih mungkin telah memetakan alias, membuka nod atau teg yang diterima seimbang. Memanggil setiap perbezaan "pelayar membetulkannya" menyembunyikan sempadan penting ini.
Kotak di dalam kotak — memperkenalkan model pokok dengan contoh ringkas
Fikirkan elemen sebagai kotak yang disambungkan oleh hubungan ibu bapa-anak. Dalam `<p>Read <strong>carefully</strong>.</p>`, p ialah induk teks, kukuh dan lebih banyak teks; kuat adalah induk perkataan dengan teliti. Lekukan sumber boleh menggambarkan pokok tetapi tidak mewujudkan perhubungan.
Pemformat cantik ToolAcre meletakkan bekas blok pada baris dan menyimpan elemen sebaris dengan teks sekeliling. Senarai menerima baris li inden. Format ini adalah untuk membaca output yang telah dibersihkan. Model sebenar kekal elemen bersarang dan nod teks, tidak kira sama ada sumber padat atau tersebar merentas baris.
Sarang yang dibenarkan diseimbangkan oleh penulis semula ToolAcre; model kandungan pelayar adalah lebih luas
HTML mentakrifkan model kandungan yang jauh lebih luas dan lebih terperinci daripada dasar editor ini. ToolAcre membenarkan set tertentu tetapi tidak mengesahkan setiap peraturan sarang semantik. Timbunannya memastikan penutupan yang terbentuk dengan baik antara tag yang dibenarkan; itu bukan bukti bahawa setiap perhubungan yang terhasil adalah ideal HTML untuk destinasi.
Sebagai contoh, senarai harus mengandungi item senarai yang sesuai, namun tindanan generik boleh mengekalkan gabungan luar biasa yang dibenarkan kerana ia bukan pengesah skema. Pengarang harus membina tajuk, perenggan dan senarai yang wajar melalui bar alat atau sumber yang disemak, kemudian mengesahkan di bawah keperluan destinasi apabila ketepatan adalah berbangkit.
ToolAcre membaiki teg yang diterima dengan timbunan, bukan algoritma penghuraian HTML yang lengkap
Pelayar menggunakan algoritma penghuraian HTML penuh dengan pemulihan ralat. ToolAcre tidak melaksanakannya semula. Tokenizernya mengiktiraf struktur yang diperlukan oleh senarai yang dibenarkan, dan penulisnya menutup elemen dalaman yang diterima apabila teg hujung silangan muncul. Ia jatuh sesat menutup dan menutup baki terbuka pada akhir.
Sumber secara eksplisit menamakan pembezaan penghurai sebagai sebab untuk tidak menganggap modul sebagai penapis XSS input bermusuhan am. Pelayar boleh mentafsir rentetan yang sengaja rosak secara berbeza. Kotak pasir pratonton menyediakan had bebas untuk pelaksanaan di dalam ToolAcre, manakala pelayan masih memerlukan sanitasi HTML5 yang betul.
Nod teks dan ruang kosong — merangkumi sebab ruang dan pemisah baris antara teg wujud dalam pepohon
Teks antara elemen menjadi token teks, termasuk aksara ruang kosong. Pemformat cantik meruntuhkan ruang kosong biasa di luar pra, manakala kandungan pra dikekalkan dengan tepat. Penukaran teks biasa memasukkan baris baharu selepas penghujung blok dan untuk br, kemudian mengurangkan larian baris kosong yang berlebihan.
Oleh itu ruang kosong mengambil bahagian secara berbeza pada setiap peringkat. Jarak visual boleh datang daripada teks, br, sempadan blok atau CSS. Periksa nod dan aksara daripada menganggap setiap jurang yang kelihatan sebagai margin. Sanitizer mungkin menormalkan pemformatan ruang kosong tanpa mengubah perkataan yang dilihat pembaca.
Contoh yang berjaya: mengesan nota dua perenggan dengan senarai — membaca markup yang dihasilkan sebagai pokok, mengenal pasti ibu bapa dan anak-anak
Bina `<h2>Checklist</h2><p>Read <strong>carefully</strong>.</p><ul><li>Source</li><li>Preview</li></ul>`. Serpihan mempunyai tiga anak elemen peringkat akar. Perenggan mengandungi teks dan kuat; senarai mengandungi dua kanak-kanak li, setiap satu dengan teks.
Beralih daripada sumber kepada visual dan belakang. Pokok yang dibenarkan harus kekal seimbang, dan mod cantik akan meletakkan tajuk dan perenggan pada baris sambil menginden item senarai. Latihan ini dikawal; ia tidak menunjukkan setiap input yang salah bentuk atau laluan pembaikan pelayar.
Perkara yang tidak dilindungi ini — JavaScript DOM pengaturcaraan atau model kotak CSS
Artikel ini tidak mengajar pengaturcaraan JavaScript DOM, pemerhati mutasi, API Pemilihan atau model kotak CSS. Pokok elemen dan pokok kotak susun atur adalah berkaitan tetapi tidak sama. Ia juga tidak mendakwa senarai token tulisan tangan ialah pelayar DOM.
Tiada kesimpulan keselamatan umum berikut dari pokok yang kemas. Penyerang boleh menyasarkan perbezaan penghuraian dan URL, itulah sebabnya penapisan output, pratonton kotak pasir dan sanitasi pelayan kekal berbeza. Gunakan model pokok untuk membuat alasan tentang struktur, bukan untuk mengetepikan semakan keselamatan sistem penerima.
Bawa pulang: fikir dalam pokok — meringkaskan model mental dan cara keluaran penanda editor ToolAcre HTML WYSIWYG menunjukkan pokok yang anda sedang bina
Fikirkan dalam pokok apabila tingkah laku visual kelihatan sewenang-wenangnya. Kenal pasti nod ibu bapa, anak dan teks yang anda maksudkan, kemudian bandingkan dengan sumber yang ditapis. ToolAcre menjadikan pemeriksaan ini praktikal dengan menggandingkan draf boleh diedit kandungan dengan serpihan ditulis semula yang boleh dibaca.
Model mental yang kuat juga mendedahkan had: div yang tidak dibalut kehilangan induk, skrip yang digugurkan kehilangan subpokoknya dan b menjadi kuat. Sebaik sahaja transformasi tersebut jelas, pembetulan menjadi keputusan struktur dan bukannya sentuhan visual berulang yang penandanya masih tidak diketahui.