在光标位置处插入图片

在光标位置处插入图片

问题来源

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

需要了解的前置知识(可以略过)

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)

由于本人学识有限，有很多需要提升的地方，望大家多多指教。