1

I have a div with contentEditable set to true.

What I currently have is a file upload in an iframe which sets the location of the uploaded file as a variable. I then put the caret in the position I want to add it to the div and click another button to add the image.

What I would like to do is put the caret in position and then click the file upload. Then when I have selected the file to upload, it remembers the position the caret was in and adds the image there.

So ultimately I need to store the caret position in a variable.

I think this will make a difference but the div will contain child elements such as a, strong and span tags.

Here's what I have so far for getting the caret position...

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));
});​

and 

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

http://jsfiddle.net/cDNZK/

Tom
  • 12,776
  • 48
  • 145
  • 240
  • 1
    So... whathaveyoutried.com ? why don't you just store it in a variable? Give us some code, man! – PitaJ Nov 28 '12 at 16:13
  • 1
    http://stackoverflow.com/questions/3315824/preserve-text-selection-in-contenteditable-while-interacting-with-jquery-ui-dial – Tim Down Nov 28 '12 at 16:19
  • @TimDown - I think this solution might work but how do I implement it? – Tom Nov 28 '12 at 17:10

0 Answers0