Alat pengembang · HTML WYSIWYG editor
Bagaimana Editor WYSIWYG Mengubah Pemformatan menjadi HTML: Penjelasan yang dapat diedit
· Cara kerjanya
html contenteditable alur kerja pengembang
Menjelaskan atribut contenteditable yang membuat elemen apa pun dapat diedit, bagaimana browser mengubah DOM saat Anda mengetik dan memformat, dan bagaimana DOM tersebut menjadi HTML yang Anda salin.
Anda menekan huruf tebal; dari mana asal <strong>? — terbuka dengan celah antara mengeklik tombol dan melihat markup
Tombol toolbar berlabel Bold terasa seperti kuas, namun browser harus mewakili hasilnya dalam pohon dokumen. Frasa yang dipilih dapat menjadi elemen <b> atau <strong> bergantung pada perintah dan mesin pengeditan. Tugas pengembang adalah mengubah mutasi khusus browser tersebut menjadi HTML yang dapat dibaca laman lain tanpa menerima setiap tag atau atribut berbahaya. Apa yang Anda lihat di layar adalah DOM yang dapat diedit, bukan file pengolah kata dengan lapisan pemformatan independen.
dapat diedit: atribut yang membuat halaman dapat diedit — menjelaskan host pengeditan, penempatan tanda sisipan, dan bagaimana browser memiliki perilaku pengeditan
contenteditable="true" menjadikan elemen sebagai host pengeditan. Browser mengelola pergerakan tanda sisipan, pemilihan, penyisipan dan penghapusan di dalamnya, dengan pohon DOM di bawahnya. Permukaan pengeditan ToolAcre menggunakan fitur browser ini dan menampilkan mode visual dan mode sumber; kontennya tetap berada di halaman dan bukannya dikirimkan ke server teks kaya. Peristiwa tempel mendapat perhatian tersendiri karena HTML yang ditempel dapat menyertakan elemen dan atribut yang tidak boleh masuk ke dokumen tepercaya jika tidak dicentang.
Setiap penekanan tombol adalah mutasi DOM — menjelaskan pertumbuhan node teks, elemen dibungkus dan dipecah, dan mengapa pohon berubah meskipun teks terlihat tidak berubah
Mengetik membuat atau memperluas node teks; menekan Enter dapat membagi satu blok; menebalkan pilihan akan membungkus rentang. DOM yang tepat setelah dua klik tidak dijamin cocok dengan string <strong> yang dibayangkan pengembang: browser memilih elemen yang berbeda dan menyusunnya. ToolAcre saat ini menggunakan document.execCommand untuk pemformatan. API tersebut tidak digunakan lagi, namun tidak ada pengganti drop-in yang diterapkan secara seragam untuk setiap operasi pengeditan di sini, sehingga editor memperlakukan keluarannya sebagai masukan yang tidak tepercaya untuk dinormalisasi, bukan sebagai markup kanonik.
Dari string DOM hingga HTML — menjelaskan serialisasi pohon yang diedit ke dalam markup yang dapat Anda salin
Untuk menyalin HTML, editor membaca innerHTML permukaan pengeditan dan meneruskan string yang dihasilkan melalui daftar elemen/attribute yang diizinkan. Tag seperti b dinormalisasi menjadi kuat semantik; tautan yang diizinkan diperiksa untuk skema URL yang dapat diterima, sementara pengendali kejadian dan atribut yang tidak terkait dihapus. Mode sumber juga meneruskan teksnya melalui filter yang sama sebelum mengembalikannya ke permukaan visual. Ini adalah jalur pembersihan khusus editor, bukan pembersih HTML sisi server untuk tujuan umum untuk konten berbahaya dari pengguna sewenang-wenang.
Contoh praktis: catatan dua paragraf dengan frasa tebal — mengikuti DOM saat mengetik, memilih, dan mencetak tebal, lalu menampilkan markup yang dihasilkan
Ketik dua paragraf—“Pembaruan proyek” dan “Draf siap”—lalu pilih “Draf” di paragraf kedua dan tekan Tebal. Browser dapat memasukkan <b>Draft</b> ke dalam DOM langsung. Beralih ke mode sumber meneruskannya melalui pembersih ToolAcre, yang dapat mengeluarkan <strong>Draft</strong> di dalam paragrafnya setelah normalisasi. Coba muatan <img onerror="..."> yang ditempelkan dalam dokumen sekali pakai: daftar keluaran yang diizinkan tidak menyertakan gambar atau atribut pengendali peristiwa. Contoh ini mengilustrasikan alasan Anda memeriksa markup yang dihasilkan daripada mengasumsikan sebuah klik memiliki satu representasi HTML universal.
Alasan tindakan yang sama memberikan markup berbeda di browser berbeda — mencakup perilaku pengeditan khusus browser dan alasan editor menormalkan keluarannya
Browser yang berbeda menerapkan perintah pengeditan, jeda baris, dan batasan pemilihan secara berbeda. Bahkan paragraf identik yang terlihat dapat dibuat bersambung dengan rentang bersarang atau elemen blok yang berbeda. Langkah normalisasi mengurangi beberapa perbedaan tetapi tidak membuat permukaan WYSIWYG menjadi serializer yang dijamin standar. ToolAcre menampilkan sumber di samping hasil visual, sehingga Anda dapat memperbaiki kumpulan yang aneh. Pratinjaunya berjalan di iframe dengan atribut sandbox yang tidak memberikan eksekusi skrip, sehingga membatasi dampak fragmen tidak aman yang mencapai pratinjau tersebut.
Apa yang tidak tercakup dalam hal ini — pengeditan kolaboratif, pembatalan tumpukan, dan kerangka kerja editor lengkap berada di luar cakupan
Halaman ini tidak menjanjikan pengeditan kolaboratif, riwayat pembatalan lengkap, klien email yang disempurnakan, atau kerangka editor lengkap. Contenteditable tidak dapat dengan sendirinya memutuskan markup apa yang diterima CMS pihak ketiga, dan daftar yang diizinkan berbasis string bukanlah pengganti pembersih parser HTML5 sisi server tempat pengguna yang tidak tepercaya dapat mengirimkan konten. Pratinjau dalam kotak pasir adalah pertahanan terpisah dari hasil pembersihan; tidak ada yang membuat JavaScript sewenang-wenang atau URL yang tidak bersahabat menjadi aman di setiap tujuan.
Kesimpulan: editornya adalah a DOM Anda dapat melihat — merangkum mekanisme dan caranya ToolAcre'S HTML WYSIWYG editor memperlihatkan markup yang dihasilkan pemformatan Anda, tanpa meninggalkan browser
Editornya adalah DOM yang dapat Anda lihat dan periksa. Editor ToolAcre HTML WYSIWYG memberi Anda cara langsung untuk membandingkan tindakan pemformatan visual dengan HTML terfilter yang dihasilkannya, secara lokal di browser Anda. Ketik dan cetak tebal catatan sekali pakai, alihkan ke mode sumber dan simpan hanya elemen yang benar-benar didukung oleh tujuan Anda.