Set Caret added Redactor V2
by jrweinb
HTML
<div id="post-form">
<div class="redactor_ redactor_editor" contenteditable="true" dir="ltr" onkeyup="showCaretPos();" onmouseup="showCaretPos();">
<p>I may just have some hope</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("editable");
var el = document.getElementById('post-form').getElementsByClassName('redactor_editor');
var child_length = el[0].childNodes.length;
console.log(el[0].childNodes);
console.log("------------");
//console.log(el.childNodes[6]);
for (var i = 0; i < child_length; i++) {
//console.log(el.childNodes[i].nodeType);
if (el[0].childNodes[i].nodeType === 3)
{
var range = document.createRange();
var sel = window.getSelection();
//var ranger = sel.getRangeAt(0);
range.setStart(el[0].childNodes[i], 0);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
console.log(range.endOffset);
var mo = el[0].childNodes[i];
console.log(mo.previousElementSibling);
//getCaretCharacterOffsetWithin(el);
//console.log(mo.previousElementSibling.
}
}
}
function getCaretCharacterOffsetWithin(element) {
var caretOffset = 0;
var doc = element.ownerDocument || element.document;
var win = doc.defaultView || doc.parentWindow;
var sel;
if (typeof win.getSelection != "undefined") {
var range = win.getSelection().getRangeAt(0);
var preCaretRange = range.cloneRange();
preCaretRange.selectNodeContents(element);
preCaretRange.setEnd(range.endContainer, range.endOffset);
caretOffset = preCaretRange.toString().length;
} else if ( (sel = doc.selection) && sel.type != "Control") {
var textRange = sel.createRange();
var preCaretTextRange = doc.body.createTextRange();
preCaretTextRange.moveToElementText(element);
preCaretTextRange.setEndPoint("EndToEnd", textRange);
caretOffset = preCaretTextRange.text.length;
}
return caretOffset;
}
function showCaretPos() {
var el...