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

Question

我有一个div，其contentEditable设置为true。

我目前拥有的是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));
});​ 

和

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

http://jsfiddle.net/cDNZK/