在光標位置處插入圖片

在光標位置處插入圖片

問題來源

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

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

Selection函數

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

window.getSelection()code

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

Range圖片

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

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

Selection.getRangeAt()get

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

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)


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

相關文章
相關標籤/搜索