Alat pengembang · HTML WYSIWYG editor
Enter vs Shift+Enter: Bagaimana Editor Memilih Antara <p>, <div> dan <br>
· Cara kerjanya
html contenteditable pengeditan teks
Menjelaskan model paragraf di belakang editor browser: mengapa Enter dapat membuat <p> atau <div>, mengapa Shift+Enter menyisipkan <br>, dan bagaimana hal tersebut menentukan spasi Anda.
Mengapa spasi salah di CMS tetapi baik-baik saja di editor — dibuka dengan masalah klasik celah ganda atau tanpa celah
Spasi yang tampak nyaman di editor dapat berubah ketika fragmen memasuki CMS karena blok menerima margin dari stylesheet tujuan. Dua paragraf dan dua baris yang dipisahkan oleh br secara struktural berbeda meskipun satu pratinjau memberikan jarak vertikal yang serupa.
ToolAcre memperlihatkan perbedaan sumber tersebut. Itu tidak membawa margin yang disalin atau gaya sebaris, jadi penspasian paragraf berasal dari pembungkus pratinjau atau tujuan yang lebih baru CSS. Penulis harus memilih struktur berdasarkan makna dan memverifikasi elemen serial daripada menambahkan penekanan tombol kosong hingga satu tampilan sementara terlihat benar.
Blokir versus jeda sebaris — menjelaskan bahwa <p> dan <div> adalah blok dengan marginnya sendiri, sedangkan <br> adalah jeda baris di dalam blok
Paragraf dan div adalah wadah blok; br adalah elemen pemisah garis kosong di dalam aliran lain. Editor ini mengizinkan p dan br tetapi tidak mengizinkan div. Div yang ditempel akan dibuka bungkusnya, mempertahankan kata-katanya dan mengizinkan keturunan sambil membuang bungkusnya. Br yang disanitasi dikeluarkan sebagai `<br />`.
Alamat pos dapat berupa satu paragraf dengan jeda baris yang disengaja karena baris-barisnya membentuk satu kesatuan. Dua pemikiran independen lebih baik direpresentasikan sebagai dua paragraf. Tujuan dapat mengatur gaya margin p secara konsisten, sementara elemen br berulang digunakan sebagai pengatur jarak vertikal yang mengkodekan tampilan langsung ke dalam konten.
Apa yang dilakukan Enter di sini bergantung pada browser dan tidak dikonfigurasi oleh ToolAcre
ToolAcre tidak menetapkan perintah pemisah paragraf default atau mencegat Enter. Browser yang dapat diedit akan menangani kunci tersebut, dan pemroses masukan akan menyegarkan keluaran setelahnya. Batasan repositori memperingatkan bahwa perilaku mesin berbeda, jadi menyatakan bahwa Enter selalu membuat p, selalu membuat div, atau mengikuti satu aturan khusus versi akan menjadi panduan kompatibilitas.
Langkah sanitasi kemudian mempersempit serialisasi apa pun yang datang. Div yang dibuat oleh browser tidak dapat bertahan sebagai div, meskipun teksnya tetap ada. Hal ini mungkin membuat sumber akhir berbeda lagi dengan pohon perantara yang masih hidup. Oleh karena itu, mode sumber adalah tempat untuk menetapkan elemen p eksplisit ketika makna paragraf yang stabil penting.
Istirahat lunak dapat ditulis dalam sumber, tetapi tidak ada kontrak Shift+Enter yang diterapkan
Toolbar tidak memiliki tombol "soft break" dan kode tidak mendaftarkan Shift+Enter. Browser mungkin menerapkan isyarat itu, namun artikel ini tidak menjanjikan hasilnya. Mode sumber dapat mempertahankan br yang diperbolehkan, memberikan cara deterministik untuk menyatakan jeda dalam paragraf setelah memeriksa hasil visual.
Perilaku keyboard juga bergantung pada status pemilihan dan pengeditan yang tidak diuji oleh modul. Gunakan browser yang sama persis dengan pekerjaan Anda, lalu baca sumbernya. Jika isyarat menghasilkan blok yang tidak diinginkan, tulis ulang fragmen secara eksplisit daripada mengandalkan deskripsi pintasan yang disalin dari kerangka editor lain.
Contoh praktis: buat alamat dan catatan, lalu periksa, bukan prediksi
Untuk alamat, gunakan mode sumber untuk membuat satu p dengan br antara penerima, jalan, dan lokalitas. Singkatnya, buatlah dua elemen p. Kembali ke mode visual, di mana sumber dibersihkan sebelum dimasukkan, dan bandingkan pratinjau tanpa mengasumsikan marginnya cocok dengan situs web akhir.
Kemudian salin HTML dan periksa fragmen secara terpisah dari Unduh HTML. Hasil yang disalin berisi markup tubuh yang telah disanitasi; unduhan berisi dokumen lengkap dengan pratinjau ToolAcre CSS. Perbedaan ini dapat menjelaskan mengapa membuka file yang diunduh terlihat lebih lengkap daripada menempelkan fragmen yang disalin ke dalam sistem dengan gaya berbeda.
Paragraf kosong dan spasi tidak terputus hanya dipertahankan jika didukung oleh penulis ulang
Paragraf kosong yang diizinkan dapat tetap ada karena p diterima dan tidak ada aturan yang menghapus blok kosong. Entitas non-breaking-space yang diketahui dapat menjadi karakter yang didekodekan dan kemudian di-escape sesuai dengan implementasi entitas lokal; kode tersebut tidak memberikan aturan pembersihan yang secara khusus menargetkan paragraf pengatur jarak.
Oleh karena itu, “Sanitasi sekarang” bukanlah pembersih tata letak. Ini menghapus markup dan atribut yang tidak didukung, menyeimbangkan tag dan format sumber, namun dapat mempertahankan kekosongan yang diizinkan secara struktural. Hapus artefak spasi dengan sengaja dalam mode sumber atau visual, dan biarkan tujuan CSS memberikan margin normal daripada mengumpulkan blok kosong.
Apa yang tidak tercakup di sini — CSS aturan penciutan margin atau konfigurasi kerangka editor
Artikel ini tidak membahas penurunan margin, konfigurasi pemisah kerangka kerja, matriks keyboard browser-per-browser, atau kebiasaan spasi email. Ia juga tidak mengklaim bahwa pratinjau mereproduksi CMS. Kotak pasir ringan menggunakan font badan, tinggi garis, bantalan, dan perilaku putusnya sendiri.
Juga tidak memperlakukan keluaran yang difilter sebagai publikasi yang aman secara universal. Pengiriman berbahaya memerlukan sanitasi sisi server yang sesuai dengan tujuannya, meskipun pratinjau lokal sekali pakai tetap tidak aktif. Semantik paragraf, perilaku pengeditan browser, dan kebijakan keamanan adalah tiga masalah terpisah yang tidak boleh digabungkan menjadi satu pengujian yang “tampaknya benar”.
Kesimpulan: pilih jeda yang sesuai dengan maknanya — rangkum model dan caranya ToolAcre'S HTML WYSIWYG editor memungkinkan Anda memeriksa elemen mana yang dihasilkan setiap kunci
Pilih jeda yang sesuai dengan konten, tetapi verifikasi daripada memprediksi penekanan tombol. ToolAcre memberikan akses sumber langsung, menerima p dan br, membuka bungkus div dan menampilkan rendering kotak pasir. Fakta tersebut mendukung alur kerja yang berulang tanpa memberikan janji tentang Enter atau Shift+Enter.
Buat alamat dan catatan kecil, ganti mode dua kali, dan pastikan struktur yang diinginkan bertahan dari sanitasi. Jika suatu tujuan menerapkan celah yang mengejutkan, periksa CSS-nya daripada memasukkan lebih banyak HTML yang kosong. Makna yang stabil tersebar lebih baik daripada spasi yang disesuaikan dengan satu pratinjau yang terisolasi.