製作WEB線上編輯器-插入HTML標籤_經驗交流

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 以剪貼簿內容覆蓋目前選取區。 
PlayImage 目前尚未支援。 
Print 開啟列印對話方塊以便使用者列印目前頁。 
Redo 重做。 
Refresh 刷新目前文件。 
RemoveFormat 從目前選取區移除格式化標籤。 
RemoveParaFormat 目前尚未支援。 
SaveAs 將目前 Web 頁面儲存為檔案。 
SelectAll 選取整份文件。 
SizeToControl 目前尚未支援。 
SizeToControlHeight 目前尚未支援。 
SizeToControlWidth 目前尚未支援。 
Stop 停止。 
StopImage 目前尚未支援。 
StrikeThrough 目前尚未支援。 
Subscript 目前尚未支援。 
Superscript 目前尚未支援。 
UnBookmark 從目前選取區中刪除全部書籤。 
Underline 切換目前選取區的底線顯示與否。 
Undo 撤銷。 
Unlink 從目前選取區中刪除全部超級連結。 
Unselect 清除目前選取區的選取狀態。

另外，在當前鼠標所點的位置插入字符可用以下方法：

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