Buat editor teks sebaris dengan atribut yang boleh dipertikaikan

Membina editor teks sebaris tidak remeh. Proses ini bermula dengan membuat elemen sasaran yang boleh diedit, pengendalian potensi

pengecualian di sepanjang jalan. SyntaxError

Membuat editor anda

Untuk membina editor ini, anda perlu mengubahsuai kandungan elemen HTML secara dinamik. Inilah struktur HTML asas:

Edit Document<br><br><br>
<div id="editor">
  <h1 id="title">A Nice Heading.</h1>
  <p>Last Edited By - Monty Shokeen</p>
  <p id="content">Some content that needs correction.</p>
</div><br><br>

setiap elemen yang anda mahu buat memerlukan keperluan ID yang unik. Kami juga akan menambah bar alat yang mudah:

<div id="toolbar">
  H1
  H2
</div><br><br>

Sekarang, mari tambahkan fungsi. Kami akan melampirkan acara klik ke butang H1 untuk menunjukkan input teks. Untuk menguji ini, gunakan pelayan web mudah (seperti

). Jalankan serve di direktori projek anda; Pelayan akan bermula, menyediakan pautan ke fail HTML anda. serve

menggunakan

untuk penyuntingan keseluruhan halaman designMode

sangat sesuai untuk mengedit elemen individu. Untuk mengubahsuai hampir semua kandungan pada halaman, gunakan harta contentEditable. Ini memberi kesan kepada keseluruhan dokumen. Dayakannya dengan designMode dan nyahdayakannya dengan document.designMode = 'on';. document.designMode = 'off';

Ini amat berguna apabila memisahkan reka bentuk dan penciptaan kandungan. Seorang pereka menyediakan teks susun atur dan pemegang tempat, sementara pencipta kandungan mengisi kandungan sebenar. Untuk bereksperimen, buka konsol pemaju penyemak imbas anda, taip

, dan tekan Enter. Keseluruhan halaman harus diedit. document.designMode = 'on';

Kesimpulan

atribut

memudahkan pengeditan cepat, seperti mengubahsuai artikel atau komen pengguna. Pada mulanya diperkenalkan dalam IE 5.5, kini standard Whatwg dengan sokongan penyemak imbas yang luas (tidak termasuk opera mini). contentEditable

JavaScript kekal sebagai asas kepada pembangunan web. Walaupun ia mempunyai lengkung pembelajaran, banyak rangka kerja dan perpustakaan boleh didapati. Terokai pasaran Envato untuk sumber tambahan.

Tutorial ini meliputi asas -asas

, menunjukkan editor inline asas dan menambah butang pemformatan yang kaya. contentEditable

Pos ini termasuk kemas kini dari Jacob Jackson, pemaju web, penulis teknikal, freelancer, dan penyumbang sumber terbuka.

Atas ialah kandungan terperinci Buat editor teks sebaris dengan atribut yang boleh dipertikaikan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!