Making a WEB online editor - inserting HTML tags_Experience exchange

I used to think that the online editor of WEB was nothing more than the replacement of input content and the quick insertion of HTML code. However, when I did it, I found that although the principle is that, the implementation method is not as rigid as I thought. Since I rarely do UI things, I didn’t know until now 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 position of the cursor, and it should be noted that if there is a limit To insert a label within a 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 parameter is not known yet, and the third parameter is the ID name. A BUTTON control with ID=btn will be inserted here. If you want to add other attributes, just follow it. Just write, for example
a.document.execCommand('insertButton','','btn class=btnclass color=red');

Detailed list of the first parameter
2D- Position allows absolutely positioned objects to be moved by dragging.
AbsolutePosition sets the position attribute of the element to "absolute" (absolute).
BackColor sets or gets the background color of the currently selected area.
BlockDirLTR is not currently supported.
BlockDirRTL is not currently supported.
Bold Switches whether the currently selected area is bold or not.
BrowseMode is not currently supported.
Copy Copies the current selection to the clipboard.
CreateBookmark Creates a bookmark anchor or gets the name of the bookmark anchor of the current selection or insertion point.
CreateLink Inserts a hyperlink on the current selection, or displays a dialog box allowing the user to specify the URL of the hyperlink to be inserted for the current selection.
Cut Copies the current selection to the clipboard and deletes it.
Delete Delete the currently selected area.
DirLTR is not currently supported.
DirRTL is not currently supported.
EditMode is not currently supported.
FontName Sets or gets the font of 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 tag.
Indent increases the indent of the selected text.
InlineDirLTR is not supported yet.
InlineDirRTL is not currently supported.
InsertButton Use button control to cover the currently selected area.
InsertFieldset covers the currently selected area with a box.
InsertHorizontalRule covers the current selection with a horizontal line.
InsertIFrame covers the current selection with an inline frame.
InsertImage covers the current selection with an image.
InsertInputButton Use button control to cover the currently selected area.
InsertInputCheckbox Use the checkbox control to cover the currently selected area.
InsertInputFileUpload uses the file upload control to overwrite the currently selected area.
InsertInputHidden inserts a hidden control to cover the currently selected area.
InsertInputImage covers the current selection with an image control.
InsertInputPassword Use password control to cover the currently selected area.
InsertInputRadio uses a radio button control to cover the currently selected area.
InsertInputReset uses the reset control to overwrite the current selection.
InsertInputSubmit uses the submit control to overwrite the currently selected area.
InsertInputText covers the current selection with text control.
InsertMarquee covers the currently selected area with empty subtitles.
InsertOrderedList switches whether the currently selected area is a numbered list or a regular formatted block.
InsertParagraph overwrites the current selection with line breaks.
InsertSelectDropdown Use the drop-down box control to cover the currently selected area.
InsertSelectListbox Use the list box control to cover the currently selected area.
InsertTextArea covers the currently selected area with a multi-line text input control.
InsertUnorderedList switches whether the currently selected area is a bullet list or a regular formatted block.
Italic Switches whether the currently selected area is displayed in italics or not.
JustifyCenter Centers the currently selected area in the formatting block.
JustifyFull is not currently supported.
JustifyLeft will align the formatting block of the currently selected area to the left.
JustifyNone is not currently supported.
JustifyRight Right-justifies the formatting block where the currently selected area is located.
LiveResize forces the MSHTML editor to continuously update an element's appearance during scaling or movement, rather than only updating after the movement or scaling is complete.
MultipleSelection allows the user to select more than one site selectable element at a time while holding down the Shift or Ctrl key.
Open Open.
Outdent Reduce the indent of the formatting block where the selected area is located.
OverWrite switches the insertion and overwriting of text state.
Paste overwrites the current selection with the clipboard content.
PlayImage is not currently supported.
Print Opens the print dialog box so the user can print the current page.
Redo redo.
Refresh Refresh the current document.
RemoveFormat removes the formatting tag from the current selection.
RemoveParaFormat is not currently supported.
SaveAs saves the current Web page as a file.
SelectAll selects the entire document.
SizeToControl is not currently supported.
SizeToControlHeight is not currently supported.
SizeToControlWidth is not currently supported.
Stop Stop.
StopImage is not currently supported.
StrikeThrough is not currently supported.
Subscript is not currently supported.
Superscript is not currently supported.
UnBookmark deletes all bookmarks from the currently selected area.
Underline switches whether the underline of the currently selected area is displayed or not.
Undo Undo.
Unlink Delete all hyperlinks from the current selection.
Unselect Clears the selected status of the currently selected area.

In addition, the following methods can be used to insert characters at the current mouse point:

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