Alat pembangun · HTML WYSIWYG editor
Mengapa 'Apa yang Anda Lihat' Tidak Pernah Cukup 'Apa yang Anda Dapat' dalam HTML
· Latar belakang
html css boleh diedit kandungan
Menerangkan sebab struktur WYSIWYG sahaja boleh menganggarkan hasil akhir di web, kerana HTML menerangkan struktur manakala CSS, peranti dan pelanggan menentukan penampilan, dan idea WYSIWYM yang berkembang daripadanya.
Sempurna dalam editor, salah pada halaman — dibuka dengan ketidakpadanan biasa
Notis boleh kelihatan seimbang di dalam ToolAcre dan sesak selepas memasuki tapak kerana elemen yang sama bertemu dengan lembaran gaya yang berbeza. Iframe tempatan ialah dokumen dengan fon sendiri, ketinggian garisan, padding dan skema warna cerah. Ia adalah paparan pemeriksaan, bukan tangkapan skrin setiap destinasi.
Oleh itu WYSIWYG mempunyai makna yang terhad di web. Editor boleh menunjukkan konteks pemaparan semasanya dengan tepat, tetapi "apa yang anda dapat" kemudiannya termasuk hos CSS, lebar bekas, tetapan pelayar dan perubahan kandungan yang tidak hadir semasa penggubalan.
HTML menerangkan struktur, bukan penampilan — menerangkan bahawa penanda yang sama dipaparkan secara berbeza di bawah helaian gaya yang berbeza
HTML terutamanya merekodkan struktur dan perhubungan: tajuk, perenggan, senarai, petikan, penekanan, kod dan pautan. Penampilan muncul apabila ejen pengguna lalai dan gaya pengarang mentafsir elemen tersebut. ToolAcre mengalih keluar gaya sebaris dan atribut kelas, mengukuhkan pemisahan itu dalam serpihan yang disalin.
H2 yang sama boleh menjadi besar dalam halaman lalai, padat dalam kad aplikasi dan digayakan semula dalam cetakan. Peranannya kekal sebagai tajuk walaupun dimensi berubah. Pengarang harus menilai sama ada struktur itu betul sebelum memutuskan sama ada satu pratonton mempunyai tipografi yang dikehendaki.
Lembaran gaya ejen pengguna dan lata — meliputi gaya pelayar lalai dan cara tapak CSS mengatasi perkara yang ditunjukkan oleh pratonton editor
Pelayar bermula dengan peraturan ejen pengguna untuk elemen, kemudian gunakan gaya halaman dan pilihan pengguna melalui lata. Dokumen pratonton ToolAcre menambah lembaran gaya kecilnya sendiri. Ia tidak mengimport token reka bentuk tapak hos atau tema CMS pada masa hadapan.
Apabila markup yang disalin memasuki halaman lain, margin p, lekukan senarai, warna pautan dan skala tajuk semuanya boleh berubah. Penyelesaiannya adalah untuk tidak membakar gaya pratonton sementara ke dalam serpihan, kerana editor ini juga menanggalkannya. Gunakan pembentangan yang disemak di destinasi dan uji di sana.
Peranti, mod gelap dan klien e-mel — menerangkan banyak konteks pemaparan yang akan ditemui oleh coretan
Peranti mengubah lebar yang tersedia, metrik fon dan zum pengguna. Tema mod gelap boleh menukar warna, manakala ToolAcre sengaja menyematkan pratontonnya pada dokumen yang cerah. Pelanggan e-mel mengenakan satu lagi set kekangan HTML dan CSS yang halaman ini tidak meniru atau mengesahkannya.
Tiada sumber repositori membekalkan matriks keserasian pelayar atau mel-klien, jadi artikel ini menamakan dimensi secara kualitatif dan bukannya menjanjikan gelagat universal. Tuntutan responsif dan e-mel memerlukan ujian dalam persekitaran sokongan sebenar. Satu iframe kotak pasir tidak boleh menyokong bukti itu.
WYSIWYM: apa yang anda lihat ialah maksud anda — memperkenalkan falsafah penyuntingan struktur yang dipopularkan oleh alat seperti LyX
Pemikiran penyuntingan struktur bertanyakan maksud kandungan dan bukannya sama ada permukaan penggubalan betul-betul menyerupai titik akhir. Tahap pengepalaan menyatakan hierarki, menyenaraikan pengelompokan nyata, menyatakan kepentingan yang kuat dan memautkan destinasi ekspres. CSS kemudian menyampaikan makna tersebut secara visual untuk konteks.
Buku kerja memanggil ini WYSIWYM dan menamakan LyX, tetapi tiada sumber sejarah tersedia di sini. Konsep ini boleh dijelaskan tanpa memperuntukkan asal usul atau gelagat produk: niat semantik pengarang dahulu, kemudian pratonton dan laraskan pembentangan di mana kandungan sebenarnya akan hidup.
Contoh berfungsi: satu coretan dalam tiga konteks — menunjukkan penanda yang sama di bawah helaian gaya lalai, tema tapak dan pratonton e-mel
Bina satu serpihan dengan h2, p, kuat, ul dan pautan awam. Buka dokumen yang dimuat turun untuk melihat pembungkus cahaya ToolAcre, tampal serpihan yang disalin ke dalam halaman ujian bertema dan letakkan salinan yang disesuaikan dalam pratonton e-mel yang diluluskan. Pastikan perkataan sama.
Tiga pandangan mungkin berbeza kerana gaya dan peraturan pelanggan mereka berbeza, manakala struktur sumber boleh kekal setanding. Jika e-mel memerlukan jadual atau pembentangan sebaris, itu adalah terjemahan yang berasingan; ToolAcre mengalih keluar kedua-dua jadual dan gaya dan bukannya berpura-pura pratonton penyemak imbasnya telah mengesahkan peti masuk.
Perkara ini tidak meliputi — CSS penyahpepijatan atau mengkonfigurasi editor untuk memuatkan gaya tapak
Artikel ini tidak menyahpepijat kekhususan CSS, mengkonfigurasi editor dengan gaya tapak atau memperakui penanda e-mel. Ia juga tidak mendakwa bahawa output yang disalin adalah selamat untuk penerbitan yang tidak dipercayai sewenang-wenangnya. Pembersih ialah senarai dibenarkan editor sempit dengan risiko pembezaan parser yang didokumenkan.
Kotak pasir pratonton menghentikan skrip, borang dan akses asal yang sama di dalam ToolAcre. Disalin HTML meninggalkan kotak pasir itu. Gunakan sanitasi sebelah destinasi, CSP jika sesuai, ujian responsif dan semakan kebolehaksesan. Ketidakpadanan visual dan keselamatan adalah masalah yang berasingan walaupun kedua-duanya kelihatan selepas penerbitan.
Bawa pulang: edit makna, sahkan markup — meringkaskan pendekatan dan cara ToolAcre's HTML WYSIWYG editor membolehkan anda menumpukan pada markup yang sebenarnya anda serahkan
Edit makna dan sahkan markup sebelum mengejar pariti visual. ToolAcre menjadikan serpihan semantik dan pemaparan setempat tersedia bersebelahan, yang membantu mengenal pasti sama ada ketidakpadanan datang daripada struktur atau daripada persembahan destinasi.
Kemudian alihkan serpihan yang disemak ke dalam konteks yang mewakili dan ukur hasilnya di sana. Aliran kerja yang baik menjangkakan perbezaan, merekodkan penyesuaian yang disengajakan dan mengelak daripada mendakwa bahawa satu paparan editor meramalkan setiap pelayar, peranti, tema atau peti masuk.