Erstellen eines WEB-Online-Editors – Einfügen von HTML-Tags_Erfahrungsaustausch

Früher dachte ich, der Online-Editor von WEB sei nichts anderes als das Ersetzen von Eingabeinhalten und das schnelle Einfügen von HTML-Code. Als ich es jedoch tat, stellte ich fest, dass die Implementierungsmethode zwar nicht so starr ist wie ich dachte. Da ich selten UI-Dinge mache, wusste ich bisher nicht, dass es im Dokument eine execCommand-Methode gibt, die das Problem des Einfügens von HTML-Tags lösen kann. Diese Methode kann die erforderlichen HTML-Tags an der Position des Cursors einfügen Beachten Sie, dass Sie zum Einfügen einer Beschriftung innerhalb eines Bereichs zunächst den Fokus auf den Bereich legen müssen, z. B.:
a.focus();
a.document.execCommand('insertButton ','','btn');
hier Das a-Objekt ist ein Iframe-Objekt. Der erste Parameter in execcommand ist der Befehl des Steuerelements, das noch nicht bekannt ist, und der dritte Parameter ist der ID-Name, der hier eingefügt wird Fügen Sie einfach andere Attribute hinzu. Schreiben Sie zum Beispiel
a.document.execCommand('insertButton','','btn class=btnclass color=red'); erster Parameter
2D-Position ermöglicht das Verschieben absolut positionierter Objekte durch Ziehen.
AbsolutePosition setzt das Positionsattribut des Elements auf „absolut“ (absolut).
BackColor legt die Hintergrundfarbe des aktuell ausgewählten Bereichs fest oder ruft diese ab.
BlockDirLTR wird derzeit nicht unterstützt.
BlockDirRTL wird derzeit nicht unterstützt.
Fett Schaltet um, ob der aktuell ausgewählte Bereich fett dargestellt ist oder nicht.
BrowseMode wird derzeit nicht unterstützt.
Kopieren Kopiert die aktuelle Auswahl in die Zwischenablage.
CreateBookmark Erstellt einen Lesezeichenanker oder ruft den Namen des Lesezeichenankers der aktuellen Auswahl oder des Einfügepunkts ab.
CreateLink Fügt einen Hyperlink zur aktuellen Auswahl ein oder zeigt ein Dialogfeld an, in dem der Benutzer die URL des Hyperlinks angeben kann, der für die aktuelle Auswahl eingefügt werden soll.
Ausschneiden Kopiert die aktuelle Auswahl in die Zwischenablage und löscht sie.
Löschen Den aktuell ausgewählten Bereich löschen.
DirLTR wird derzeit nicht unterstützt.
DirRTL wird derzeit nicht unterstützt.
EditMode wird derzeit nicht unterstützt.
FontName Legt die Schriftart des aktuell ausgewählten Bereichs fest oder ruft sie ab.
FontSize legt die Schriftgröße des aktuell ausgewählten Bereichs fest oder ruft diese ab.
ForeColor legt die Vordergrundfarbe (Textfarbe) des aktuell ausgewählten Bereichs fest oder ruft diese ab.
FormatBlock Legt das aktuelle Blockformatierungs-Tag fest.
Einzug vergrößert den Einzug des ausgewählten Textes.
InlineDirLTR wird noch nicht unterstützt.
InlineDirRTL wird derzeit nicht unterstützt.
InsertButton Verwenden Sie die Schaltflächensteuerung, um den aktuell ausgewählten Bereich abzudecken.
InsertFieldset deckt den aktuell ausgewählten Bereich mit einem Kästchen ab.
InsertHorizontalRule deckt die aktuelle Auswahl mit einer horizontalen Linie ab.
InsertIFrame deckt die aktuelle Auswahl mit einem Inline-Frame ab.
InsertImage überdeckt die aktuelle Auswahl mit einem Bild.
InsertInputButton Verwenden Sie die Schaltflächensteuerung, um den aktuell ausgewählten Bereich abzudecken.
InsertInputCheckbox Verwenden Sie das Kontrollkästchen-Steuerelement, um den aktuell ausgewählten Bereich abzudecken.
InsertInputFileUpload verwendet die Datei-Upload-Steuerung, um den aktuell ausgewählten Bereich zu überschreiben.
InsertInputHidden fügt ein ausgeblendetes Steuerelement ein, um den aktuell ausgewählten Bereich abzudecken.
InsertInputImage deckt die aktuelle Auswahl mit einem Bildsteuerelement ab.
InsertInputPassword Verwenden Sie die Passwortkontrolle, um den aktuell ausgewählten Bereich abzudecken.
InsertInputRadio verwendet ein Optionsfeld-Steuerelement, um den aktuell ausgewählten Bereich abzudecken.
InsertInputReset verwendet die Reset-Steuerung, um die aktuelle Auswahl zu überschreiben.
InsertInputSubmit verwendet das Submit-Steuerelement, um den aktuell ausgewählten Bereich zu überschreiben.
InsertInputText deckt die aktuelle Auswahl mit Textsteuerung ab.
InsertMarquee deckt den aktuell ausgewählten Bereich mit leeren Untertiteln ab.
InsertOrderedList schaltet um, ob der aktuell ausgewählte Bereich eine nummerierte Liste oder ein normal formatierter Block ist.
InsertParagraph überschreibt die aktuelle Auswahl mit Zeilenumbrüchen.
InsertSelectDropdown Verwenden Sie das Dropdown-Feld-Steuerelement, um den aktuell ausgewählten Bereich abzudecken.
InsertSelectListbox Verwenden Sie das Listenfeld-Steuerelement, um den aktuell ausgewählten Bereich abzudecken.
InsertTextArea deckt den aktuell ausgewählten Bereich mit einem mehrzeiligen Texteingabesteuerelement ab.
InsertUnorderedList schaltet um, ob der aktuell ausgewählte Bereich eine Aufzählungsliste oder ein normal formatierter Block ist.
Kursiv Schaltet um, ob der aktuell ausgewählte Bereich kursiv angezeigt wird oder nicht.
JustifyCenter Zentriert den aktuell ausgewählten Bereich im Formatierungsblock.
JustifyFull wird derzeit nicht unterstützt.
JustifyLeft richtet den Formatierungsblock des aktuell ausgewählten Bereichs links aus.
JustifyNone wird derzeit nicht unterstützt.
JustifyRight richtet den Formatierungsblock rechtsbündig dort aus, wo sich der aktuell ausgewählte Bereich befindet.
LiveResize zwingt den MSHTML-Editor dazu, das Erscheinungsbild eines Elements während der Skalierung oder Bewegung kontinuierlich zu aktualisieren, anstatt erst nach Abschluss der Bewegung oder Skalierung zu aktualisieren.
MultipleSelection ermöglicht es dem Benutzer, mehr als ein auf der Website auswählbares Element gleichzeitig auszuwählen, während er die Umschalt- oder Strg-Taste gedrückt hält.
Offen Offen.
Outdent Reduziert den Einzug des Formatierungsblocks an der Stelle, an der sich der ausgewählte Bereich befindet.
OverWrite schaltet das Einfügen und Überschreiben des Textstatus um.
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 actuellement pas 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é permet d'afficher ou non le soulignement de la zone actuellement sélectionnée.
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>