Alat pengembang · HTML WYSIWYG editor
Apa Yang Terjadi Saat Anda Menempel dari Word atau Google Dokumen ke Editor Web
· Cara kerjanya
html contenteditable pembersihan teks
Menjelaskan apa yang dibawa oleh pasta teks kaya, mulai dari mso-style hingga elemen wrapper dan tumpukan font, dan menunjukkan cara membaca markup yang dihasilkan sebelum mencapai situs Anda.
Itu tampak bagus di Word — dibuka dengan artikel yang ditempel yang spasi dan fontnya bertentangan dengan desain situs
Paragraf yang disalin dari pengolah kata dapat terlihat bagus di sumbernya dan muncul dengan font, spasi, dan wrapper yang bertentangan dengan situs. ToolAcre tidak menyimpan presentasi tersebut secara grosir. Pemroses tempelnya memotong operasi sebelum markup kaya asli dimasukkan dan memilih representasi yang difilter.
Bukti penting adalah pandangan sumber, bukan apakah kesan visual pertama menyerupai dokumen aslinya. Editornya sengaja dipersempit: judul, paragraf, penekanan, daftar, kutipan, elemen seperti kode, dan tautan dapat bertahan, sedangkan wadah tata letak, nama kelas, id, dan atribut gaya sebaris tidak termasuk dalam kontrak keluarannya.
Papan klip memuat lebih dari sekadar teks — menjelaskan bahwa salinan teks kaya menyertakan ragam HTML di samping teks biasa
Papan klip dapat mengekspos `text/html` dan `text/plain` untuk satu operasi penyalinan. Pawang meminta keduanya. Ketika payload HTML ada, ia akan membersihkan string tersebut dan menyisipkan fragmen yang ditulis ulang dengan `insertHTML`; hanya ketika HTML yang kaya tidak ada barulah ia memasukkan muatan biasa dengan `insertText`.
Prioritas tersebut telah dibuktikan dengan kode untuk panel ini, bukan pernyataan universal tentang setiap aplikasi. Ini menjelaskan mengapa pasta kaya dapat menyimpan daftar namun kehilangan tampilannya. Aplikasi sumber menulis papan klip HTML, namun daftar yang diizinkan ToolAcre memutuskan bagian mana yang diizinkan ke permukaan yang dapat diedit.
Apa yang dihapus editor ini dari pasta kaya: elemen, atribut, dan komentar yang tidak didukung
Elemen yang tidak didukung ditangani dengan dua cara. Pembungkus biasa yang tidak dikenal dibuka bungkusnya sehingga kata-katanya tetap ada, sementara skrip, gaya, iframe, formulir, SVG, MathML, dan wadah berisiko atau non-editor lainnya dihapus bersama dengan isinya. Komentar dan doctypes juga dibuang daripada dimasukkan ke dalam draf.
Atribut menghadap gerbang kedua. Kelas, id, gaya, atribut data, dan setiap pengendali kejadian dihapus karena atribut yang diizinkan diberi nama per elemen. Ini berarti nama kelas khusus sumber dan presentasi sebaris tidak dapat melawan stylesheet tujuan setelah ToolAcre memfilter tempel, meskipun gaya sumber yang berguna mungkin juga hilang.
Mengapa wrapper dan gaya khusus sumber tidak memenuhi daftar yang diizinkan
Repositori tidak menyediakan perlengkapan Word atau Google Docs yang diambil, jadi artikel ini tidak menciptakan kelas `mso-` yang tepat, id internal, atau urutan pembungkus untuk rilis tertentu. Hal ini dapat menyatakan konsekuensi yang dibuktikan oleh daftar yang diizinkan: kelas dan gaya dihapus terlepas dari aplikasi sumber mana yang menyediakannya.
Aturan agnostik sumber tersebut merupakan panduan editorial yang lebih kuat daripada katalog yang rapuh. Periksa pemberitahuan penghapusan setelah menempel. Ini mencatat alasan unik seperti pembungkus yang tidak didukung, atribut terlarang, atau URL yang ditolak. Laporan tersebut memberi tahu Anda apa yang dibuang oleh implementasi ini tanpa berpura-pura mengidentifikasi aplikasi yang awalnya menghasilkan setiap fragmen.
Contoh praktis: tempel tiga paragraf dan baca markup yang difilter
Salin tiga paragraf pendek, buat kalimat tengah menjadi tebal dan kalimat terakhir menjadi daftar. Setelah menempel, alihkan ke mode sumber. Elemen paragraf, kuat, ul, dan li berada dalam daftar yang diizinkan, sementara div di sekitarnya tidak terbungkus dan atribut gaya menghilang. Tag lama b dan i dinormalisasi menjadi kuat dan em.
Sekarang tambahkan atribut peristiwa tidak aman dalam sampel sumber sekali pakai dan kembali ke mode visual. Atribut dihapus sebelum sumber tersebut menjadi DOM. Hal ini menunjukkan batas penyuntingan, bukan publikasi yang aman atas kiriman yang tidak bersahabat. Proyek ini secara eksplisit memperingatkan tentang perbedaan parser dan memerlukan pembersih sisi server yang sesuai untuk konten yang tidak tepercaya.
Tempel teks biasa hanya digunakan bila papan klip tidak menyediakan rasa HTML
Penyisipan teks biasa adalah pengganti, bukan perintah “tempel tanpa pemformatan” yang dapat dipilih pengguna di toolbar ini. Jika clipboard menyediakan HTML, ToolAcre mengambil cabang tersebut. Pintasan browser atau sistem operasi mungkin menampilkan tempelan biasa saja, namun repositori tidak mendefinisikan atau menjanjikan perilaku pintasan tertentu.
Ketika hanya teks yang tersedia, `insertText` meminta browser untuk menempatkan karakter tersebut di tanda sisipan. Struktur paragraf apa pun yang dibuat selanjutnya tetap tunduk pada perilaku pengeditan browser. Gunakan tampilan sumber untuk menambahkan judul atau daftar yang disengaja daripada mengasumsikan jeda baris dari aplikasi lain secara otomatis menjadi struktur yang CMS Anda harapkan.
Apa yang tidak tercakup dalam hal ini — aturan pembersihan otomatis, filter tempel khusus CMS, atau mempertahankan perubahan yang terlacak
Alur kerja ini tidak menyimpan perubahan terlacak, komentar, tata letak halaman, font, warna, tabel, atau gambar. Gambar sengaja dihilangkan karena gambar yang diizinkan membuat permintaan keluar dan permukaan penangan kesalahan. Editor juga tidak memiliki profil pembersihan khusus sumber atau peralihan yang menjanjikan kesetiaan pada satu jaringan aplikasi perkantoran.
Menempel secara lokal tidak membuktikan bahwa tujuan akhir akan menerima subset yang sama. CMS dapat menghapus lebih banyak tag, menulis ulang tautan, atau menerapkan kebijakannya sendiri. Bandingkan keluaran editor dengan dokumentasi tujuan, dan simpan salinan asli ketika kehilangan format yang tidak didukung akan menghilangkan informasi dan bukan sekadar presentasi.
Kesimpulan: lihat sebelum Anda mempublikasikannya — rangkum kebiasaan inspeksi dan caranya ToolAcre'S HTML WYSIWYG editor memungkinkan Anda menempelkan secara lokal dan melihat markupnya sebelum dipindahkan ke mana pun
Lihat sebelum dipublikasikan: tempelkan fragmen representatif dan tidak sensitif, baca peringatan penghapusan, periksa sumbernya, dan pratinjau hasil yang difilter. ToolAcre memberikan satu daftar yang diizinkan secara eksplisit daripada secara diam-diam membawa presentasi asing ke situs Anda. Hal ini membuat pembersihan terlihat, namun tidak menyatakan HTML sebagai aman.
Jika struktur penting hilang, bangun kembali dengan judul, paragraf, daftar, penekanan, dan tautan yang didukung. Jika target menerima lebih sedikit, sederhanakan lebih lanjut. Artefak yang benar bukanlah tiruan visual yang paling mendekati dokumen sumber; itu ditinjau markup yang makna dan kebijakan tujuannya dipahami.