在光标位置处插入图片

在光标位置处插入图片

问题来源

须要在图中所示的文本区域内在光标处插入一张图片

须要了解的前置知识(能够略过)

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)

因为本人学识有限，有不少须要提高的地方，望你们多多指教。