Analisis ringkas tentang prinsip pelaksanaan kemahiran editor_javascript HTML WYSIWYG dalam talian

Pada masa kini, pembangunan tapak web semakin menggalakkan pengalaman pengguna, dan semakin banyak alat untuk memberikan kemudahan kepada pengguna, dan penyunting kandungan HTML dalam talian harus dianggap sebagai salah satu yang "lebih tua". Mereka yang mempunyai fungsi mudah boleh menyediakan pengguna dengan kawalan gaya teks, seperti warna teks, saiz fon, dsb., manakala mereka yang mempunyai fungsi yang kompleks malah boleh menyediakan fungsi yang berkuasa serupa dengan Word. Walaupun terdapat banyak editor sumber terbuka sekarang, tidak banyak yang benar-benar mudah digunakan, jadi kerja penambahbaikan mereka sentiasa berjalan.

Kebanyakan editor di Internet hari ini mempunyai fungsi yang sangat berkuasa Secara relatifnya, mereka juga memerlukan banyak konfigurasi semasa penggunaan Sudah tentu, kod itu secara semula jadi akan "kembung". Jika kita tidak memerlukan editor yang begitu berkuasa, kita boleh melaksanakannya sendiri, kerana kodnya tidak rumit. Berikut adalah sedikit pengalaman peribadi, untuk rujukan sahaja (mengambil ExtJS HTMLEditor sebagai contoh).

1. Apabila halaman telah selesai dimuatkan, tambahkan IFrame pada halaman (pilihan). Apa yang perlu diperhatikan di sini ialah untuk menentukan status halaman, tunggu sehingga halaman dimuatkan sepenuhnya sebelum meneruskan untuk mengelakkan ralat di mana elemen tertentu tidak dapat ditemui.

2. Buka fungsi penyuntingan. Jadikan IFrame boleh diedit (kod di bawah berasal dari HTMLEditor ExtJS):

Salin kod Kod adalah seperti berikut:

// Dapatkan objek tetingkap iframe
getWin : function(){
           kembalikan Ext.isIE ? this.iframe.contentWindow : window.frames[this.iframe.name];
},

//Dapatkan objek dokumen iframe
getDoc: function(){
           kembalikan Ext.isIE ? this.getWin().document: (this.iframe.contentDocument || this.getWin().document);
},

//Buka objek dokumen dan tulis kandungan permulaan padanya agar serasi dengan FireFox
doc = this.getDoc();
doc.open();
doc.write('');
//Buka mod penyuntingan objek dokumen
doc.designMode = "on";
doc.close();

Dengan cara ini anda boleh menulis kandungan ke dalam editor mudah ini.

3. Dapatkan kandungan editor, kodnya adalah seperti berikut:

Salin kod Kod adalah seperti berikut:

//Dapatkan objek badan editor
var body = doc.body ||. doc.documentElement;
//Dapatkan kandungan editor
kandungan var = body.innerHTML;
//Proses kandungan, seperti menggantikan beberapa aksara khas, dsb.
//Beberapa kod

//Kembalikan kandungan
kembalikan kandungan;

4. Tambah tetapan gaya. Walaupun editor di atas melaksanakan fungsi asas, ia benar-benar terlalu mudah Beberapa pelaksanaan gaya mudah harus ditambah. Kaedah execCommand dokumen menjadikan idea ini mungkin.

Salin kod Kod adalah seperti berikut:

//Kaedah arahan pelaksanaan seragam
fungsi execCmd(cmd, nilai){
//Untuk mendapatkan objek dokumen, rujuk kod di atas
//Panggil kaedah execCommand untuk melaksanakan arahan
doc.execCommand(cmd, false, value === undefined ? null : value);
};

//Tukar fon yang dipilih kepada tebal, Ctrl-B
execCmd('bold');
//Garis bawah, Ctrl-U
execCmd('garis bawah');
//Tukar kepada huruf condong, Ctrl-I
execCmd('italic');
//Tetapkan warna teks
execCmd('forecolor', Ext.isSafari || Ext.isIE ? '#' color : color);
//Masukkan sekeping kandungan pada kursor
fungsi insertAtCursor(teks){
//Untuk mendapatkan objek win, rujuk kod di atas
jika(Ext.isIE){
      win.focus();
var r = doc.selection.createRange();
Jika(r){
         r.runtuh(benar);
          r.pasteHTML(text);                          } else if(Ext.isGecko || Ext.isOpera){
      win.focus();
​​execCmd('InsertHTML', text);
} else if(Ext.isSafari){
​​execCmd('InsertText', text);
}
}

5. Pergi selangkah lebih jauh. Sekarang anda boleh menukar gaya Jika editor mempunyai bar alat (ini sepatutnya tidak dapat dielakkan), maka kami juga mahu butang pada bar alat diserlahkan atau dipaparkan secara automatik mengikut gaya kedudukan kursor. Kaedah queryCommandState() dokumen membolehkan idea ini direalisasikan.

Salin kod Kod adalah seperti berikut:

//Untuk mendapatkan objek dokumen, rujuk pada bahagian bertentangan
//Sama ada kursor tebal
var isBold = doc.queryCommandState('bold');
if(isBold){
//Tukar gaya butang Bold
}
//Sudah tentu kod di atas boleh digabungkan, ini hanyalah petunjuk

//Gariskan
doc.queryCommandState('garis bawah');
//italic
doc.queryCommandState('italic');

Artikel ini hanya memberikan idea mudah untuk melaksanakan editor, dan beberapa kod boleh digunakan secara langsung. Adalah disyorkan bahawa rakan-rakan yang ingin melaksanakan editor mereka sendiri boleh merujuk kepada kod HTMLEditor dalam ExtJS, yang mudah dan jelas, dan boleh dilanjutkan padanya.

Satu peringatan terakhir: Pastikan anda memberi perhatian kepada isu keserasian penyemak imbas dan jangan tunggu sehingga tamat untuk menguji keserasian Untuk jumlah kod JavaScript yang begitu besar, pelarasan lebih menyakitkan.