Caret Position Working

by jrweinb

HTML

<div id="post-form">
<div class="redactor_ redactor_editor" contenteditable="true" dir="ltr" onkeyup="showCaretPos();" onmouseup="showCaretPos();">
    <p>1 3 5678 11 14161820</p>
    <br>
    <div class="attachment" contenteditable="false" data-webdocument-id="19" data-url="http%3A%2F%2Fwww.google.com">
        <div class="media-block">
            <img class="teaser-img small linkified" src="http://www.google.com/images/srpr/logo9w.png">
             <h4 class="tea
ser-title">+Google</h4>
 <a href="http://www.google.com" class="teaser-meta in-media linkified" target="_blank">google.com</a>

        </div>
    </div>
    <br>
    <p>this is another line</p>
    <p>One more liney liney line-zoe</p>
</div>
</div>
<button id="button" onclick="setCaret()">focus</button>
<div id="caretPos"></div>

JavaScript

function setCaret() {
    var el = document.getElementById('post-form').getElementsByClassName('redactor_editor')[0];
    var child_length = el.childNodes.length;
    for (var i = 0; i < child_length; i++) {
        if (el.childNodes[i].nodeType === 3)
        {
                var range = document.createRange();
                var sel = window.getSelection();    
                range.setStart(el.childNodes[i], 0);
                range.collapse(true);
                sel.removeAllRanges();
                sel.addRange(range);
               var mo = el.childNodes[i];
               console.log(mo.previousElementSibling);
               
        }
    }
}

function getCaretCharacterOffsetWithin(element) {
    var caretOffset = 0;
    console.log(element);
    var doc = element[0].ownerDocument || element[0].document;
    var win = doc.defaultView || doc.parentWindow;
    var sel;
    if (typeof win.getSelection != "undefined") {
        console.log("A");
        var range = win.getSelection().getRangeAt(0);
        var preCaretRange = range.cloneRange();
        console.log("Range:  ");
        console.log(range);
        console.log("------------------------");
        console.log("preCaretRange:  ");
        console.log(preCaretRange);     
        preCaretRange.selectNodeContents(element[0]);
        preCaretRange.setEnd(range.endContainer, range.endOffset);
        console.log(preCaretRange.toString());
        console.log(preCaretRange.toString().length);
        caretOffset = preCaretRange.toString().length;
        console.log("CaretOffset: ");
        console.log(caretOffset);
    } else if ( (sel = doc.selection) && sel.type != "Control") {
        console.log("B");
        var textRange = sel.createRange();
        var preCaretTextRange = doc.body.createTextRange();
        preCaretTextRange.moveToElementText(element);
        preCaretTextRange.setEndPoint("EndToEnd", textRange);
        caretOffset = preCaretTextRange.text.length;
    }
    return...