将图像插入到contentEditable div中的光标位置

Question

使用contentEditable div，可以很容易地将图像插入文本区域，但是如何将图像（或其他任何html元素）插入光标的确切位置？

html：

<div id="textarea" contenteditable>

  <img src="https://loremflickr.com/320/240?lock=1" contenteditable="true" style="width:45px" id="myimg" />
  Some text...

</div>

css：

#textarea {
    -moz-appearance: textfield-multiline;
    -webkit-appearance: textarea;
    border: 1px solid gray;
    font: medium -moz-fixed;
    font: -webkit-small-control;
    height: 400px;
    width: 400px;
    overflow: auto;
    padding: 2px;
    resize: both;  
}