Alat pengembang · HTML WYSIWYG editor
Mengapa execCommand Tidak Digunakan Lagi dan Apa yang Digunakan Editor Browser
· Cara kerjanya
html contenteditable alur kerja pengembang
Meliputi naik turunnya document.execCommand, mengapa keluarannya tidak konsisten, dan bagaimana editor modern memanfaatkan Seleksi, Rentang, dan masukan sebelumnya.
Tombol tebal satu baris yang tidak lagi aman — dibuka dengan execCommand('bold') dan peringatan penghentian
Tombol tebal dapat berupa satu panggilan: fokuskan permukaan pengeditan, lalu minta `document.execCommand` untuk menerapkan `bold` ke pilihan saat ini. ToolAcre masih menggunakan jalur itu karena browser memiliki tanda sisipan dan rentang yang dipilih di dalam elemen yang dapat diedit. Panggilan ringkas memang nyaman, namun kenyamanan tidak membuat pohon yang dihasilkan dapat diprediksi.
Kode ini memperlakukan penolakan sebagai kemungkinan biasa. Pembungkus perintahnya menangkap pengecualian, mengumumkan bahwa browser menolak tindakan tersebut, dan mengarahkan penulis ke mode sumber. Penggantian tersebut lebih jujur daripada menjanjikan bahwa satu klik toolbar selalu menghasilkan satu elemen tertentu atau bekerja secara identik di setiap mesin.
Apa yang dilakukan execCommand dan dari mana asalnya — menjelaskan asal usulnya pada awal Internet Explorer dan penerapannya oleh setiap browser
Pembungkus yang sama mendorong daftar tebal, miring, tidak berurutan dan berurutan, penghapusan format, pembatalan, pengulangan, pemformatan blok, tautan, dan pembatalan tautan. Itu adalah perintah yang sebenarnya ada di toolbar; artikel ini tidak memperluas daftar dengan perataan, warna, font, tabel, gambar, atau fitur teks kaya lainnya yang tidak pernah dipaparkan oleh penerapannya.
Setiap perintah dijalankan melawan DOM yang dapat diedit langsung. Setelah itu, panel menyegarkan sumbernya, pratinjau, jumlah kata dan laporan penghapusan dari innerHTML saat ini. Oleh karena itu, hasil yang disimpan bukan log perintah. Ini adalah serialisasi yang difilter dari struktur apa pun yang ditinggalkan browser setelah melakukan atau menolak operasi yang diminta.
Mengapa perintah API tidak digunakan lagi: browser dapat menghasilkan bentuk DOM yang berbeda
Penghentian penting karena API tidak memberikan kontrak struktural yang tepat kepada penulis editor untuk setiap mutasi. Batasan ToolAcre secara eksplisit memperingatkan bahwa perilaku berbeda antar mesin, khususnya di sekitar daftar bersarang. Daftar yang terlihat mungkin dapat diterima meskipun pilihan sarang atau pembungkusnya berbeda dari markup yang dihasilkan browser lain.
Tidak ada sumber repositori yang mendukung klaim bahwa setiap browser, versi, atau perintah memiliki hasil kompatibilitas tertentu. Pernyataan aman lebih sempit: implementasi ini memanggil API yang tidak digunakan lagi, menerima penolakan, dan menawarkan pengeditan sumber langsung sebagai jalan keluar. Uji browser dan operasi yang ingin Anda gunakan daripada mengekstrapolasi matriks.
Seleksi dan Rentang merupakan alternatif yang relevan, namun alat ini tidak menerapkannya
Seleksi dan Rentang dapat mendeskripsikan batas DOM yang dipilih dan mendukung manipulasi pohon secara eksplisit, namun ToolAcre tidak menerapkan mesin pemformatan pengganti dengan batasan tersebut. Memberi nama pada API tersebut seolah-olah merupakan jalur kode saat ini akan menyebabkan kesalahan dalam mendeskripsikan produk. Di sini, perintah browser tetap menjadi mutator dan pembersih tetap menjadi batas keluaran.
Model khusus dapat memiliki tanda, blok, transaksi, dan pemetaan pilihan, namun itu adalah arsitektur produk yang berbeda dengan pengujian yang berbeda. Editor ringan ini sengaja menghindari klaim mesin tersebut. Kontraknya yang dapat ditinjau adalah bahwa tindakan visual dapat membuat DOM yang bergantung pada browser, sedangkan mode sumber mengungkapkan markup yang difilter yang sebenarnya akan disalin atau diunduh.
beforeinput bukan bagian dari jalur pemformatan editor ini
Implementasinya juga tidak mencegat `beforeinput` untuk menerjemahkan maksud pengeditan ke dalam transaksi khusus. Peristiwa masukan hanya memicu penyegaran setelah browser mengubah permukaan. Pengecualian adalah tempel dan lepas: peristiwa tersebut dicegah, papan klip atau muatan transfernya difilter, dan hanya HTML atau teks biasa yang dihasilkan yang disisipkan.
Perbedaan tersebut menghalangi klaim arsitektur yang luas. ToolAcre memiliki gerbang tempel tetapi tidak setiap mutasi penekanan tombol. Perintah pengetikan, penghapusan, perilaku Enter, dan bilah alat biasa tetap menjadi operasi pengeditan browser. Pembersih meninjau keluaran serialnya; itu tidak mengubah editor menjadi kerangka kerja yang digerakkan oleh masukan atau menormalkan setiap mutasi DOM perantara.
Contoh praktis: periksa keluaran perintah lama yang sebenarnya dihasilkan oleh editor ini
Untuk pemeriksaan konkrit, ketikkan dua kalimat pendek, pilih satu frasa dan tekan Tebal. Beralih ke sumber HTML dan periksa elemen di sekitar frasa itu. ToolAcre memetakan `b` lama ke `strong` selama sanitasi, sehingga hasil yang difilter dapat menjadi semantik bahkan ketika perintah pengeditan langsung awalnya memilih tag lama.
Ulangi dengan daftar lalu batalkan. Bilah alat mengirimkan `insertUnorderedList` dan `undo`; itu tidak menyimpan riwayat aplikasi terpisah. Jika browser menolak, wilayah status menyatakan demikian. Jika susunannya terlihat aneh, mode sumber adalah jalur koreksi yang didukung. Keluaran yang diamati, bukan label tombol, adalah buktinya.
Apa yang tidak tercakup di sini: tidak ada arsitektur editor pengganti yang diterapkan di sini
Artikel ini tidak mengklaim dukungan untuk sistem perintah pengganti modern, transaksi kolaboratif, pohon lintas-browser deterministik, atau tumpukan pembatalan khusus. Ini juga tidak menyimpulkan perilaku pintasan keyboard karena sumbernya mendefinisikan tindakan bilah alat, bukan registri pintasan. Fitur yang tidak didukung tetap merupakan kelalaian, bukan kemampuan yang tersirat.
Keamanan terpisah dari pilihan perintah. Filter daftar yang diizinkan memancarkan markup dan pratinjau dimasukkan ke dalam kotak pasir tanpa skrip, namun pembersih secara eksplisit menolak penggunaan filter XSS masukan bermusuhan secara umum. Server yang menerima konten publikasi yang tidak tepercaya masih memerlukan pembersih parser HTML5-sisi server yang sesuai dan kebijakan khusus tujuan.
Kesimpulan: miliki DOM, bukan perintahnya — rangkum jalur migrasi dan bagaimana markup yang dihasilkan adalah apa yang Anda periksa di alat WYSIWYG-to-HTML
Miliki hasil yang dapat Anda periksa. Di editor ini, perintah akan meminta browser untuk memutasi pohon yang dapat diedit, lalu daftar yang diizinkan akan menulis ulang serialisasi pohon tersebut ke dalam subset yang didukung. Mode sumber memperlihatkan handoff dan memberikan permukaan perbaikan praktis ketika perilaku pengeditan browser tidak nyaman atau tidak konsisten.
Gunakan sampel sekali pakai di browser yang sama dengan karya Anda yang sebenarnya. Jalankan hanya perintah yang dikirimkan, periksa tautan dan sarangnya, uji pembatalan sebelum mengandalkannya, dan salin HTML yang difilter hanya setelah membacanya. Alur kerja tersebut mengikuti penghentian tanpa berpura-pura ToolAcre telah menggantikan pengeditan yang mendasarinya API.