Register a member and create your web development database.
I used to think that the online editor of the web was nothing more than a replacement of the input content and quick insertion of html code, but when I did it, I found that although the principle was the same, the implementation method was not as rigid as I thought. Since I rarely do things on ui, I only now know that there is an execcommand method in the document that can solve the problem of inserting html tags. This method can insert the required html tags at the cursor. It should be noted that if you insert a tag within a limited range, you need to first let the range gain focus, for example:
a.focus();
a.document.execcommand('insertbutton','','btn');
Here the a object is an iframe object. The first parameter in execcommand is the command of the control that needs to be inserted. The second one is not known yet. The third one is the id name. Here, a button control with id=btn will be inserted. If you want to add other attributes, you just need to continue writing it later. For example,
a.document.execcommand('insertbutton','','btnclass=btnclasscolor=red');
Detailed list of the first parameter
2d-position allows absolutely positioned objects to be moved by dragging.
absoluteposition The position attribute of the setting element is "absolute".
backcolor Sets or gets the background color of the currently selected area.
blockdirltr is not yet supported.
blockdirrrtl is not supported yet.
bold Toggle whether the bold display of the currently selected area is displayed or not.
browsermode is not yet supported.
copy Copy the currently selected area to the clipboard.
createbookmark Creates a bookmark anchor or gets the name of the bookmark anchor for the currently selected area or insertion point.
createlink Insert a hyperlink on the currently selected area, or display a dialog box that allows the user to specify the URL of the hyperlink to be inserted for the currently selected area.
cut Copy the currently selected area to the clipboard and delete it.
delete Delete the currently selected area.
dirltr is not supported yet.
dirrrtl is not supported yet.
editmode is not supported yet.
fontname Sets or gets the font for the currently selected area.
fontsize Sets or gets the font size of the currently selected area.
forecolor Sets or gets the foreground (text) color of the currently selected area.
formatblock Sets the current block formatting label.
indent Increases the indentation of the selected text.
inlinedirltr is not supported yet.
inlinedirrtl is not supported yet.
insertbutton Overwrites the currently selected area with a button control.
insertfieldset Overwrites the currently selected area with a box.
inserthorizontalrule covers the currently selected area with a horizontal line.
insertiframe Overwrites the currently selected area with an embedded frame.
insertimage Overwrites the currently selected area with an image.
insertinputbutton Overwrites the currently selected area with a button control.
insertinputcheckbox Overwrites the currently selected area with a checkbox control.
insertinputfileupload Overwrite the currently selected area with the file upload control.
insertinputhidden Insert hidden control over the currently selected area.
insertinputimage Overwrites the currently selected area with an image control.
insertinputpassword Overwrite the currently selected area with a password control.
insertinputradio Overwrite the currently selected area with the radio button control.
insertinputreset Overwrites the currently selected area with the reset control.
insertinputsubmit Overwrite the currently selected area with the submit control.
insertinputtext Overwrites the currently selected area with a text control.
insertmarquee Overwrites the currently selected area with empty subtitles.
insertorderedlist Toggles whether the currently selected area is a numbered list or a regular formatted block.
insertparagraph Overwrite the currently selected area with a newline.
insertselectdropdown Overwrites the currently selected area with the drop-down box control.
insertselectlistbox Overwrites the currently selected area with a list box control.
inserttextarea Overwrites the currently selected area with a multi-line text input control.
insertunorderedlist Toggles whether the currently selected area is a bullet list or a regular formatted block.
italic Toggle whether the italic is displayed in the currently selected area.
justifycenter Sets the currently selected area in the format block.
justifyfull is not yet supported.
justifyleft Aligns the formatting block where the currently selected area is located.
justifynone is not yet supported.
justifyright Right aligns the formatting block where the currently selected area is located.
livingesize forces the mshtml editor to continuously update the element's appearance during zooming or moving, rather than just update after the move or zooming is complete.
multipleselection allows more than one site optional element to be selected at a time when the user holds the shift or ctrl key.
open Open.
outdent Reduces the indentation of the formatted block where the selected area is located.
overwrite Toggle the insertion and overwriting of text state.
paste Overwrites the currently selected area with clipboard content.
playimage is not supported yet.
print Opens the Print dialog box so that the user can print the current page.
redo redo.
refresh Refresh the current document.
removeformat Removes the formatted tag from the currently selected area.
removeparaformat is not yet supported.
saveas Save the current web page as a file.
selectall Select the entire document.
sizetocontrol is not yet supported.
sizetocontrolheight is not supported yet.
sizetocontrolwidth is not yet supported.
stop stop.
stopimage is not supported yet.
strokethrough is not supported yet.
Subscript is not yet supported.
Superscript is not supported yet.
unbookmark Delete all bookmarks from the currently selected area.
underline Toggle the underscore display of the currently selected area.
undo undo.
unlink Remove all hyperlinks from the currently selected area.
unselect Clears the selected state of the currently selected area.
In addition, inserting characters at the current mouse pointing can be done by the following methods:
<script>functionshowselect(){
varotext=document.selection.createange();
etext.text=111;
}
</script>
<bodyonmouseup="showselect()">
<spanid=span1>zdfzadfasfdasdfadsf</span>