在光標位置處插入圖片

在光標位置處插入圖片

問題來源

須要在圖中所示的文本區域內在光標處插入一張圖片

須要瞭解的前置知識(能夠略過)

Selection

Selection對象表示用戶選擇的文本範圍或插入符號的當前位置。它表明頁面中的文本選區，可能橫跨多個元素。文本選區由用戶拖拽鼠標通過文字而產生。要獲取用於檢查或修改的Selection對象，請調用 window.getSelection()。

window.getSelection()

返回一個 Selection 對象，表示用戶選擇的文本範圍或插入符號的當前位置。

Range

Range表示包含節點和部分文本節點的文檔片斷。

Range能夠用 Document 對象的 createRange方法建立，也能夠用Selection對象的getRangeAt方法取得。另外，能夠經過構造函數 Range() 來得到一個 Range

Selection.getRangeAt()

返回一個包含當前選區內容的區域對象。

Range.createContextualFragment()

該方法經過調用HTML片斷解析算法或XML片斷解析算法返回一個文檔片斷 DocumentFragment 。

Range.insertNode()

在Range的起始位置插入節點。

解決方案

// 返回插入符號當前位置的selection對象
  var selection = window.getSelection()

  // 獲取包含當前節點的文檔片斷
  var range = selection.getRangeAt(0)

  // 建立需追加到光標處節點的文檔片斷
  var fragment = range.createContextualFragment('<img src="plugins/emoji/face/64.gif">')

  // 將建立的文檔片斷插入到光標處
  range.insertNode(fragment.lastChild)

因爲本人學識有限，有不少須要提高的地方，望你們多多指教。