Javascript contentEditable-将插入符号位置存储为变量，然后在此位置插入上载的图像

我有一个contentEditable设置为true的div

我目前拥有的是一个iframe中的文件上传，它将上传文件的位置设置为一个变量。然后，我将插入符号放在我想将其添加到div的位置，然后单击另一个按钮添加图像

我想做的是将插入符号放置到位，然后单击文件上载。然后，当我选择要上传的文件时，它会记住插入符号所在的位置，并将图像添加到该位置

因此，最终我需要将插入符号位置存储在一个变量中

我认为这会有所不同，但div将包含子元素，如a、strong和span标记

以下是我到目前为止获得插入符号位置的方法

function getCaretPosition(editableDiv) {
    var caretPos = 0;
    sel = window.getSelection();
        if (sel.rangeCount) {
            range = sel.getRangeAt(0);
            if (range.commonAncestorContainer.parentNode == editableDiv) {
                caretPos = range.endOffset;
            }
        }

    return caretPos;
}

$('.peCont').bind('keyup mouseup', function() { 
    $("p").html(getCaretPosition(this));
});​ 

及

文本与一些HTML标记一起出现在这里。
​

---

所以。。。whathaveyoutried.com？为什么不把它存储在一个变量中呢？给我们一些密码，伙计@TimDown-我认为这个解决方案可能有效，但我如何实现它？

<div class="peCont" contenteditable="true">Text goes here along with <b>some <i>HTML</i> tags</b>.</div>
<p></p>​