WEBオンラインエディタの作成～HTMLタグの挿入_体験交流

以前認為WEB的線上編輯器無非就是對輸入內容的替換以及快捷的插入HTML程式碼，但是做的時候卻發現雖然原理是那樣，但是實現方法並非我想的那麼死板。由於很少做UI上的東西所以到現在才知道在document中有execCommand方法可以解決插入HTML標籤的問題，這個方法可以在遊標所在位置插入需要的HTML標籤，並且要注意的是，如果在一個限制的範圍內插入標籤需要先讓該範圍獲得焦點，例如：
a.focus();
a.document.execCommand('insertButton','','btn');
這裡的a物件是一個iframe物件。 execcommand中的第一個參數是需要插入的控件的命令，第2個目前還不知道，第3個是ID名，這裡將插入一個ID=btn的BUTTON控件，如果想加入其他屬性只需要接著後面寫就行了，例如
a.document.execCommand('insertButton','','btn class=btnclass color=red');

第一個參數的詳細清單
2D- Position 允許透過拖曳移動絕對定位的物件。 
AbsolutePosition 設定元素的 position 屬性為「absolute」(絕對)。 
BackColor 設定或取得目前選取區域的背景顏色。 
BlockDirLTR 目前尚未支援。 
BlockDirRTL 目前尚未支援。 
Bold 切換目前選取區的粗體顯示與否。 
BrowseMode 目前尚未支援。 
Copy 將目前選取區複製到剪貼簿。 
CreateBookmark 建立一個書籤錨或取得目前選取區或插入點的書籤錨的名稱。 
CreateLink 在目前選取區上插入超級鏈接，或顯示一個對話框允許使用者指定要為目前選取區插入的超級鏈結的 URL。 
Cut 將目前選取區複製到剪貼簿並刪除之。 
Delete 刪除目前選取區。 
DirLTR 目前尚未支援。 
DirRTL 目前尚未支援。 
EditMode 目前尚未支援。 
FontName 設定或取得目前選取區的字體。 
FontSize 設定或取得目前選取區的字體大小。 
ForeColor 設定或取得目前選取區的前景(文字)顏色。 
FormatBlock 設定目前區塊格式化標籤。 
Indent 增加選取文字的縮排。 
InlineDirLTR 目前尚未支援。 
InlineDirRTL 目前尚未支援。 
InsertButton 用按鈕控制項覆蓋目前選取區。 
InsertFieldset 用方框覆蓋目前選取區。 
InsertHorizo​​​​ntalRule 用水平線覆蓋目前選取區。 
InsertIFrame 用內嵌框架覆寫目前選取區。 
InsertImage 用影像覆蓋目前選取區。 
InsertInputButton 用按鈕控制項覆蓋目前選取區。 
InsertInputCheckbox 用複選框控制項覆寫目前選取區。 
InsertInputFileUpload 以檔案上載控制項覆寫目前選取區。 
InsertInputHidden 插入隱藏控制以覆蓋目前選取區。 
InsertInputImage 用影像控制項覆寫目前選取區。 
InsertInputPassword 用密碼控制項覆寫目前選取區。 
InsertInputRadio 用單選鈕控制覆蓋目前選取區。 
InsertInputReset 以重置控制項覆蓋目前選取區。 
InsertInputSubmit 用提交控制項覆蓋目前選取區。 
InsertInputText 以文字控制項覆寫目前選取區。 
InsertMarquee 以空白字幕覆蓋目前選取區。 
InsertOrderedList 切換目前選取區是編號清單還是常規格式化區塊。 
InsertParagraph 用換行覆蓋目前選取區。 
InsertSelectDropdown 用下拉方塊控制項覆寫目前選取區。 
InsertSelectListbox 用列錶框控制項覆寫目前選取區。 
InsertTextArea 以多行文字輸入控制項覆寫目前選取區。 
InsertUnorderedList 切換目前選取區是項目符號清單還是常規格式化區塊。 
Italic 切換目前選取區斜體顯示與否。 
JustifyCenter 將目前選取區在所在格式化區塊置中。 
JustifyFull 目前尚未支援。 
JustifyLeft 將目前選取區所在格式化區塊左對齊。 
JustifyNone 目前尚未支援。 
JustifyRight 將目前選取區所在格式化區塊右對齊。 
LiveResize 迫使 MSHTML 編輯器在縮放或移動過程中持續更新元素外觀，而不是只在移動或縮放完成後更新。 
MultipleSelection 允許當使用者按住 Shift 或 Ctrl 鍵時一次選取多於一個站點可選元素。 
Open 打開。 
Outdent 減少選取區所在格式化區塊的縮排。 
OverWrite 切換文字狀態的插入與覆蓋。
貼り付けは、現在の選択範囲をクリップボードの内容で上書きします。
PlayImage は現在サポートされていません。
印刷 印刷ダイアログ ボックスが開き、ユーザーが現在のページを印刷できるようになります。
やり直しやり直し。
更新 現在のドキュメントを更新します。
RemoveFormat は、現在の選択範囲から書式設定タグを削除します。
RemoveParaFormat は現在サポートされていません。
名前を付けて保存は、現在の Web ページをファイルとして保存します。
SelectAll はドキュメント全体を選択します。
SizeToControl は現在サポートされていません。
SizeToControlHeight は現在サポートされていません。
SizeToControlWidth は現在サポートされていません。
ストップストップ。
StopImage は現在サポートされていません。
ストライクスルーは現在サポートされていません。
添字は現在サポートされていません。
上付き文字は現在サポートされていません。
ブックマークを解除すると、現在選択されている領域からすべてのブックマークが削除されます。
下線は、現在選択されている領域の下線を表示するかどうかを切り替えます。
元に戻す 元に戻す。
リンクを解除 現在の選択範囲からすべてのハイパーリンクを削除します。
選択解除 現在選択されているエリアの選択状態を解除します。

さらに、次のメソッドを使用して、現在のマウス ポイントに文字を挿入できます:

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