Alat pembangun · HTML WYSIWYG editor
Cara Editor WYSIWYG Mengubah Pemformatan menjadi HTML: contenteditable Dijelaskan
· Bagaimana ia berfungsi
html boleh diedit kandungan aliran kerja pembangun
Menjelaskan atribut contenteditable yang menjadikan mana-mana elemen boleh diedit, cara pelayar memutasi DOM semasa anda menaip dan memformat, dan cara DOM itu menjadi HTML yang anda salin.
Anda menekan huruf tebal; dari mana datangnya <strong>? — dibuka dengan jurang antara mengklik butang dan melihat markup
Butang bar alat berlabel Bold terasa seperti berus cat, tetapi pelayar mesti mewakili hasil dalam pokok dokumen. Frasa yang dipilih boleh menjadi elemen <b> atau <strong> bergantung pada arahan dan enjin pengeditan. Tugas pembangun ialah menukar mutasi khusus pelayar tersebut menjadi HTML halaman lain boleh dibaca tanpa menerima setiap teg atau atribut berbahaya. Perkara yang anda lihat pada skrin ialah DOM yang boleh diedit, bukan fail pemprosesan perkataan dengan lapisan pemformatan bebas.
boleh diedit kandungan: atribut yang menjadikan halaman boleh diedit — menerangkan hos pengeditan, peletakan karet dan cara pelayar memiliki gelagat pengeditan
contenteditable="true" menjadikan elemen sebagai hos penyuntingan. Pelayar mengurus pergerakan tanda, pemilihan, sisipan dan pemadaman di dalamnya, dengan pokok DOM di bawahnya. Permukaan pengeditan ToolAcre menggunakan ciri pelayar ini dan mendedahkan kedua-dua mod visual dan mod sumber; kandungan kekal dalam halaman dan bukannya diserahkan kepada pelayan teks kaya. Acara tampal menerima perhatian yang berasingan kerana HTML yang ditampal boleh termasuk elemen dan atribut yang tidak boleh memasuki dokumen yang dipercayai dinyahtandai.
Setiap ketukan kekunci ialah mutasi DOM — menerangkan nod teks yang berkembang, elemen dibalut dan dibelah, dan sebab pokok berubah walaupun teks kelihatan tidak berubah
Menaip mencipta atau memanjangkan nod teks; menekan Enter boleh membelah blok; tebal pilihan membalut julat. DOM yang tepat selepas dua klik tidak dijamin sepadan dengan rentetan <strong> yang dibayangkan oleh pembangun: pelayar memilih elemen dan bersarang yang berbeza. ToolAcre kini menggunakan document.execCommand untuk pemformatan. API itu ditamatkan, tetapi tiada penggantian lungsur yang dilaksanakan secara seragam untuk setiap operasi pengeditan di sini, jadi editor menganggap outputnya sebagai input yang tidak dipercayai untuk dinormalkan dan bukannya sebagai penanda kanonik.
Daripada rentetan DOM hingga HTML secara langsung — menerangkan siri pepohon yang diedit ke dalam markup yang anda boleh salin
Untuk menyalin HTML, editor membaca HTML dalaman permukaan pengeditan dan menghantar rentetan yang terhasil melalui elemen/attribute senarai yang dibenarkan. Tag seperti b dinormalisasi kepada semantik kuat; pautan yang dibenarkan disemak untuk skema URL yang boleh diterima, manakala pengendali acara dan atribut yang tidak berkaitan dialih keluar. Mod sumber juga menghantar teksnya melalui penapis yang sama sebelum meletakkannya semula ke permukaan visual. Ini ialah laluan pembersihan khusus editor, bukan pembersih HTML sisi pelayan tujuan umum untuk kandungan bermusuhan daripada pengguna sewenang-wenangnya.
Contoh yang berjaya: nota dua perenggan dengan frasa tebal — mengikut DOM melalui menaip, memilih dan menebal, kemudian menunjukkan penanda yang terhasil
Taipkan dua perenggan—“Kemas kini projek” dan “Draf sedia”—kemudian pilih “Draf” dalam perenggan kedua dan tekan Bold. Pelayar boleh memasukkan <b>Draf</b> ke dalam DOM secara langsung. Beralih kepada mod sumber meneruskannya melalui sanitizer ToolAcre, yang boleh mengeluarkan <strong>Draf</strong> di dalam perenggannya selepas penormalan. Cuba muatan <img onerror="..."> yang ditampal dalam dokumen pakai buang: senarai dibenarkan keluaran tidak termasuk imej atau atribut pengendali acara. Contoh ini menggambarkan sebab anda memeriksa penanda yang terhasil daripada menganggap klik mempunyai satu perwakilan HTML universal.
Mengapa tindakan yang sama memberikan penanda yang berbeza dalam pelayar yang berbeza — meliputi tingkah laku pengeditan khusus pelayar dan sebab editor menormalkan output mereka
Pelayar yang berbeza melaksanakan arahan pengeditan, pemisah baris dan sempadan pilihan secara berbeza. Malah perenggan kelihatan yang serupa boleh bersiri dengan rentang bersarang atau elemen blok yang berbeza. Langkah normalisasi mengurangkan beberapa perbezaan tetapi tidak menjadikan permukaan WYSIWYG sebagai penyeri bersiri yang dijamin standard. ToolAcre menunjukkan sumber bersama hasil visual, supaya anda boleh membetulkan sarang ganjil. Pratontonnya dijalankan dalam iframe dengan atribut kotak pasir yang tidak memberikan pelaksanaan skrip, mengehadkan kesan serpihan yang tidak selamat mencapai pratonton tersebut.
Perkara ini tidak meliputi — pengeditan kolaboratif, buat asal tindanan dan rangka kerja editor penuh berada di luar skop
Halaman ini tidak menjanjikan pengeditan kolaboratif, sejarah buat asal yang lengkap, klien e-mel yang digilap atau rangka kerja editor penuh. Contenteditable tidak boleh dengan sendirinya menentukan penanda yang diterima oleh CMS pihak ketiga dan senarai dibenarkan berasaskan rentetan bukanlah pengganti untuk pembersih penghurai HTML5 sebelah pelayan di mana pengguna yang tidak dipercayai boleh menyerahkan kandungan. Pratonton kotak pasir adalah pertahanan yang berasingan daripada keluaran pembersihan; tidak menjadikan JavaScript atau URL bermusuhan sewenang-wenangnya selamat di setiap destinasi.
Bawa pulang: editor ialah DOM yang anda boleh lihat — meringkaskan mekanisme dan cara ToolAcre's HTML WYSIWYG editor mendedahkan markup yang dihasilkan oleh pemformatan anda, tanpa meninggalkan pelayar
Editor ialah DOM yang boleh anda lihat dan periksa. Editor HTML WYSIWYG ToolAcre memberi anda cara terus untuk membandingkan tindakan pemformatan visual dengan HTML yang ditapis yang dihasilkannya, secara setempat dalam pelayar anda. Taip dan tebalkan nota buang, tukar kepada mod sumber dan simpan sahaja elemen yang sebenarnya disokong oleh destinasi anda.