Membuat editor dalam talian WEB - memasukkan tag HTML_Pertukaran pengalaman

Saya pernah berfikir bahawa editor dalam talian WEB tidak lebih daripada penggantian kandungan input dan penyisipan cepat kod HTML Walau bagaimanapun, apabila saya melakukannya, saya mendapati bahawa walaupun prinsipnya, kaedah pelaksanaannya tidak begitu tegar seperti yang saya fikirkan. Oleh kerana saya jarang melakukan perkara UI, saya tidak tahu sehingga kini terdapat kaedah execCommand dalam dokumen yang boleh menyelesaikan masalah memasukkan tag HTML Kaedah ini boleh memasukkan tag HTML yang diperlukan pada kedudukan kursor, dan ia perlu diambil perhatian bahawa jika terdapat had Untuk memasukkan label dalam julat, anda perlu terlebih dahulu membiarkan julat mendapat fokus, contohnya:
a.focus();
a.document.execCommand('insertButton ','','btn');
di sini Objek ialah objek iframe. Parameter pertama dalam execcommand ialah arahan kawalan yang perlu dimasukkan Parameter kedua belum diketahui, dan parameter ketiga ialah nama ID A BUTTON dengan ID=btn akan disisipkan di sini tambah atribut lain, hanya ikuti sahaja, sebagai contoh
a.document.execCommand('insertButton','','btn class=btnclass color=red'); parameter pertama
2D- Kedudukan membenarkan objek yang diposisikan secara mutlak untuk dialihkan dengan menyeret.
Posisi Mutlak menetapkan atribut kedudukan elemen kepada "mutlak" (mutlak).
BackColor menetapkan atau mendapatkan warna latar belakang kawasan yang sedang dipilih.
BlockDirLTR tidak disokong pada masa ini.
BlockDirRTL tidak disokong pada masa ini.
Suis Tebal sama ada kawasan yang dipilih pada masa ini adalah tebal atau tidak.
Mod Semak Imbas tidak disokong pada masa ini.
Salin Menyalin pilihan semasa ke papan keratan.
CreateBookmark Mencipta penanda halaman atau mendapatkan nama penanda halaman pilihan semasa atau titik sisipan.
CreateLink Memasukkan hiperpautan pada pilihan semasa, atau memaparkan kotak dialog yang membolehkan pengguna menentukan URL hiperpautan untuk dimasukkan untuk pemilihan semasa.
Potong Menyalin pilihan semasa ke papan keratan dan memadamkannya.
Padam Padamkan kawasan yang sedang dipilih.
DirLTR tidak disokong pada masa ini.
DirRTL tidak disokong pada masa ini.
Mod Edit tidak disokong pada masa ini.
FontName Menetapkan atau mendapatkan fon kawasan yang sedang dipilih.
FontSize menetapkan atau mendapatkan saiz fon kawasan yang dipilih pada masa ini.
ForeColor menetapkan atau mendapatkan warna latar depan (teks) kawasan yang sedang dipilih.
FormatBlock Menetapkan teg pemformatan blok semasa.
Inden meningkatkan inden teks yang dipilih.
InlineDirLTR belum disokong lagi.
InlineDirRTL tidak disokong pada masa ini.
Butang Sisip Gunakan kawalan butang untuk menutup kawasan yang sedang dipilih.
InsertFieldset meliputi kawasan yang sedang dipilih dengan kotak.
InsertHorizontalRule meliputi pemilihan semasa dengan garis mendatar.
InsertIFrame merangkumi pilihan semasa dengan bingkai sebaris.
InsertImage merangkumi pilihan semasa dengan imej.
InsertInputButton Gunakan kawalan butang untuk menutup kawasan yang sedang dipilih.
InsertInputCheckbox Gunakan kawalan kotak semak untuk menutup kawasan yang sedang dipilih.
InsertInputFileUpload menggunakan kawalan muat naik fail untuk menulis ganti kawasan yang sedang dipilih.
InsertInputHidden memasukkan kawalan tersembunyi untuk menutup kawasan yang sedang dipilih.
InsertInputImage meliputi pemilihan semasa dengan kawalan imej.
InsertInputPassword Gunakan kawalan kata laluan untuk meliputi kawasan yang sedang dipilih.
InsertInputRadio menggunakan kawalan butang radio untuk menutup kawasan yang sedang dipilih.
InsertInputReset menggunakan kawalan set semula untuk menulis ganti pilihan semasa.
InsertInputSubmit menggunakan kawalan hantar untuk menulis ganti kawasan yang sedang dipilih.
InsertInputText merangkumi pemilihan semasa dengan kawalan teks.
InsertMarquee meliputi kawasan yang sedang dipilih dengan sari kata kosong.
InsertOrderedList menukar sama ada kawasan yang dipilih pada masa ini ialah senarai bernombor atau blok berformat biasa.
InsertParagraph menimpa pilihan semasa dengan pemisah baris.
InsertSelectDropdown Gunakan kawalan kotak drop-down untuk menutup kawasan yang dipilih pada masa ini.
InsertSelectListbox Gunakan kawalan kotak senarai untuk meliputi kawasan yang sedang dipilih.
InsertTextArea meliputi kawasan yang dipilih pada masa ini dengan kawalan input teks berbilang baris.
InsertUnorderedList menukar sama ada kawasan yang dipilih pada masa ini ialah senarai titik tumpu atau blok berformat biasa.
Italik Suis sama ada kawasan yang dipilih pada masa ini dipaparkan dalam huruf condong atau tidak.
JustifyCenter Memusatkan kawasan yang sedang dipilih dalam blok pemformatan.
JustifyFull tidak disokong pada masa ini.
JustifyLeft akan menjajarkan blok pemformatan kawasan yang dipilih pada masa ini ke kiri.
JustifyNone tidak disokong pada masa ini.
JustifyRight Right-menjustifikasikan blok pemformatan di mana kawasan yang dipilih sekarang berada.
LiveResize memaksa editor MSHTML untuk terus mengemas kini penampilan elemen semasa penskalaan atau pergerakan, dan bukannya hanya mengemas kini selepas pergerakan atau penskalaan selesai.
MultipleSelection membenarkan pengguna memilih lebih daripada satu elemen tapak yang boleh dipilih pada satu masa sambil menahan kekunci Shift atau Ctrl.
Buka Buka.
Outdent Kurangkan inden blok pemformatan di mana kawasan yang dipilih berada.
OverWrite menukar sisipan dan timpa keadaan teks.
Coller écrase la sélection actuelle avec le contenu du presse-papiers.
PlayImage n'est actuellement pas pris en charge.
Imprimer Ouvre la boîte de dialogue d'impression afin que l'utilisateur puisse imprimer la page en cours.
Refaire refaire.
Actualiser Actualise le document actuel.
RemoveFormat supprime la balise de formatage de la sélection actuelle.
RemoveParaFormat n'est actuellement pas pris en charge.
SaveAs enregistre la page Web actuelle sous forme de fichier.
SelectAll sélectionne l’intégralité du document.
SizeToControl n'est actuellement pas pris en charge.
SizeToControlHeight n’est actuellement pas pris en charge.
SizeToControlWidth n'est actuellement pas pris en charge.
Arrêtez Arrêtez.
StopImage n'est pas encore pris en charge.
StrikeThrough n'est actuellement pas pris en charge.
L'indice n'est actuellement pas pris en charge.
L'exposant n'est actuellement pas pris en charge.
UnBookmark supprime tous les signets de la zone actuellement sélectionnée.
Souligné indique si le soulignement de la zone actuellement sélectionnée est affiché ou non.
Annuler Annuler.
Dissocier Supprime tous les hyperliens de la sélection actuelle.
Désélectionner Efface l'état sélectionné de la zone actuellement sélectionnée.

De plus, les méthodes suivantes peuvent être utilisées pour insérer des caractères au point actuel de la souris :