製作WEB線上編輯器-插入HTML標籤

來源:互聯網
上載者:User
web|插入|線上

  以前認為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 用方框覆蓋當前選中區。

  InsertHorizontalRule 用水平線覆蓋當前選中區。

  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 切換文本狀態的插入和覆蓋。

  Paste 用剪貼簿內容覆蓋當前選中區。

  PlayImage 目前尚未支援。

  Print 開啟列印對話方塊以便使用者可以列印當前頁。

  Redo 重做。

  Refresh 重新整理當前文檔。

  RemoveFormat 從當前選中區中刪除格式化標籤。

  RemoveParaFormat 目前尚未支援。

  SaveAs 將當前 Web 頁面儲存為檔案。

  SelectAll 選中整個文檔。

  SizeToControl 目前尚未支援。

  SizeToControlHeight 目前尚未支援。

  SizeToControlWidth 目前尚未支援。

  Stop 停止。

  StopImage 目前尚未支援。

  StrikeThrough 目前尚未支援。

  Subscript 目前尚未支援。

  Superscript 目前尚未支援。

  UnBookmark 從當前選中區中刪除全部書籤。

  Underline 切換當前選中區的底線顯示與否。

  Undo 撤消。

  Unlink 從當前選中區中刪除全部超級連結。

  Unselect 清除當前選中區的選中狀態。

  另外,在當前滑鼠所點的位置插入字元可用以下方法:

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

相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。