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

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

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('
') // 将创建的文档片段插入到光标处 range.insertNode(fragment.lastChild)