Réaliser un éditeur WEB en ligne - insertion de balises HTML_Echange d'expérience

Je pensais que l'éditeur en ligne de WEB n'était rien de plus que le remplacement du contenu d'entrée et l'insertion rapide du code HTML. Cependant, lorsque je l'ai fait, j'ai constaté que même si le principe est celui-là, la méthode de mise en œuvre n'est pas aussi rigide. comme je le pensais. Comme je fais rarement des choses avec l'interface utilisateur, je ne savais pas jusqu'à présent qu'il existe une méthode execCommand dans le document qui peut résoudre le problème de l'insertion de balises HTML. Cette méthode peut insérer les balises HTML requises à la position du curseur, et cela. Il convient de noter que s'il y a une limite. Pour insérer une étiquette dans une plage, vous devez d'abord laisser la plage prendre le focus, par exemple :
a.focus(); ','','btn');
ici L'objet a est un objet iframe. Le premier paramètre dans execcommand est la commande du contrôle qui doit être inséré. Le deuxième paramètre n'est pas encore connu. Le troisième paramètre est le nom de l'ID. Un contrôle BUTTON avec ID=btn sera inséré ici si vous souhaitez l'ajouter. autres attributs, suivez simplement le suivant. Écrivez simplement, par exemple
a.document.execCommand('insertButton','','btn class=btnclass color=red'); le premier paramètre
2D- Position permet de déplacer par glissement des objets positionnés de manière absolue.
AbsolutePosition définit l'attribut de position de l'élément sur "absolu" (absolu).
BackColor définit ou obtient la couleur d'arrière-plan de la zone actuellement sélectionnée.
BlockDirLTR n'est actuellement pas pris en charge.
BlockDirRTL n'est actuellement pas pris en charge.
Gras Indique si la zone actuellement sélectionnée est en gras ou non.
BrowseMode n'est actuellement pas pris en charge.
Copier Copie la sélection actuelle dans le presse-papiers.
CreateBookmark Crée une ancre de signet ou obtient le nom de l'ancre de signet de la sélection ou du point d'insertion actuel.
CreateLink Insère un hyperlien sur la sélection courante, ou affiche une boîte de dialogue permettant à l'utilisateur de préciser l'URL de l'hyperlien à insérer pour la sélection courante.
Couper Copie la sélection actuelle dans le presse-papiers et la supprime.
Supprimer Supprime la zone actuellement sélectionnée.
DirLTR n'est actuellement pas pris en charge.
DirRTL n'est actuellement pas pris en charge.
EditMode n'est actuellement pas pris en charge.
FontName Définit ou obtient la police de la zone actuellement sélectionnée.
FontSize définit ou obtient la taille de police de la zone actuellement sélectionnée.
ForeColor définit ou obtient la couleur de premier plan (texte) de la zone actuellement sélectionnée.
FormatBlock Définit la balise de formatage du bloc actuelle.
Retrait augmente le retrait du texte sélectionné.
InlineDirLTR n'est pas encore pris en charge.
InlineDirRTL n'est pas encore pris en charge.
InsertButton Utilisez le contrôle de bouton pour couvrir la zone actuellement sélectionnée.
InsertFieldset couvre la zone actuellement sélectionnée avec une boîte.
InsertHorizontalRule couvre la sélection actuelle avec une ligne horizontale.
InsertIFrame couvre la sélection actuelle avec un cadre en ligne.
InsertImage couvre la sélection actuelle avec une image.
InsertInputButton Utilisez le contrôle de bouton pour couvrir la zone actuellement sélectionnée.
InsertInputCheckbox Utilisez le contrôle de case à cocher pour couvrir la zone actuellement sélectionnée.
InsertInputFileUpload utilise le contrôle de téléchargement de fichier pour écraser la zone actuellement sélectionnée.
InsertInputHidden insère un contrôle masqué pour couvrir la zone actuellement sélectionnée.
InsertInputImage couvre la sélection actuelle avec un contrôle image.
InsertInputPassword Utilisez le contrôle par mot de passe pour couvrir la zone actuellement sélectionnée.
InsertInputRadio utilise un bouton radio pour couvrir la zone actuellement sélectionnée.
InsertInputReset utilise le contrôle de réinitialisation pour écraser la sélection actuelle.
InsertInputSubmit utilise le contrôle de soumission pour écraser la zone actuellement sélectionnée.
InsertInputText couvre la sélection actuelle avec un contrôle de texte.
InsertMarquee couvre la zone actuellement sélectionnée avec des sous-titres vides.
InsertOrderedList change si la zone actuellement sélectionnée est une liste numérotée ou un bloc au format normal.
InsertParagraph écrase la sélection actuelle avec des sauts de ligne.
InsertSelectDropdown utilise le contrôle de la liste déroulante pour couvrir la zone actuellement sélectionnée.
InsertSelectListbox Utilisez le contrôle de zone de liste pour couvrir la zone actuellement sélectionnée.
InsertTextArea couvre la zone actuellement sélectionnée avec un contrôle de saisie de texte multiligne.
InsertUnorderedList change si la zone actuellement sélectionnée est une liste à puces ou un bloc au format normal.
Italique Permet de choisir si la zone actuellement sélectionnée est affichée en italique ou non.
JustifyCenter Centre la zone actuellement sélectionnée dans le bloc de formatage.
JustifyFull n'est actuellement pas pris en charge.
JustifyLeft alignera le bloc de formatage de la zone actuellement sélectionnée vers la gauche.
JustifyNone n’est actuellement pas pris en charge.
JustifyRight Justifie à droite le bloc de formatage où se trouve la zone actuellement sélectionnée.
LiveResize force l'éditeur MSHTML à mettre à jour en permanence l'apparence d'un élément pendant la mise à l'échelle ou le mouvement, plutôt que de le mettre à jour uniquement une fois le mouvement ou la mise à l'échelle terminé.
MultipleSelection permet à l'utilisateur de sélectionner plusieurs éléments sélectionnables par site à la fois tout en maintenant la touche Maj ou Ctrl enfoncée.
Ouvrir Ouvert.
Outdent Réduisez le retrait du bloc de formatage où se trouve la zone sélectionnée.
OverWrite commute l'insertion et l'écrasement de l'état du texte.
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 :

zdfzadfasfdasdfadsf
<script> <BR>function showselect() { <BR>var oText = document.selection.createRange(); <BR>oText.text=111; <BR>} <BR></script>