Uzyskać współrzędne opiekuna na contenteditable div za pośrednictwem javascript.

Question

Szukałem dużo, ale nie mogłem znaleźć sposobu na uzyskanie współrzędnych (X, Y) dla karetki w edytowalnym edytorze treści, w sieci jest dużo treści na ten temat, ale problem nie dotyczy strony, które znalazłem, mają współrzędne według góry div, więc moje pytanie w prostszy sposób jest:

Jak mogę uzyskać współrzędne X (X, Y) kurtyny na contenteditable div, ale Współrzędna Y musi być obliczona według góry div, a nie od górnej części widocznej części strony?

Uwaga 1: Potrzebuję specjalnie współrzędnej Y.

Uwaga 2: Mogę używać wyłącznie czystego javascript, bez JAŚCI.

Mój sposób:

nie znalazłem bezpośredni sposób to zrobić, więc jako obejście myślałem na uzyskanie współrzędna Y według widocznej części strony i ukrytej części z Dziel i sumuj wyniki (obecnie pracuję nad tym, ale nie mam szczęścia!).

Answer 1

spróbować http://plnkr.co/edit/T2S7sKByTIesEVC6R8jQ?p=preview

document.addEventListener("DOMContentLoaded", function(event) { 
    var pointer = document.querySelector('#marker') 
    function checkCaret() { 
    if(document.getSelection()) { 
     if(document.getSelection().baseNode) { 
     var position = document.getSelection().baseNode.parentNode.getBoundingClientRect() 
     pointer.style.top = position.top + 'px' 
     } 
    } 
    } 
    setInterval(checkCaret, 500) 
}); 

Answer 2

znaleźć na (X, Y) koordynuje i przy użyciu czystego javascript, funkcja ta znalazłem może załatwić sprawę: w tym Source znajdziecie wszystkie wyjaśnienia dotyczące procesu ich (kod poniżej pochodzą z tego samego źródła):

function getPosition(el) { 
    var xPos = 0; 
    var yPos = 0; 

    while (el) { 
    if (el.tagName == "BODY") { 
     // deal with browser quirks with body/window/document and page scroll 
     var xScroll = el.scrollLeft || document.documentElement.scrollLeft; 
     var yScroll = el.scrollTop || document.documentElement.scrollTop; 

     xPos += (el.offsetLeft - xScroll + el.clientLeft); 
     yPos += (el.offsetTop - yScroll + el.clientTop); 
    } else { 
     // for all other non-BODY elements 
     xPos += (el.offsetLeft - el.scrollLeft + el.clientLeft); 
     yPos += (el.offsetTop - el.scrollTop + el.clientTop); 
    } 

    el = el.offsetParent; 
    } 
    return { 
    x: xPos, 
    y: yPos 
    }; 
} 

Answer 3

1. wybór get a zakres

   var sel = window.getSelection(); 
   var range = sel.getRangeAt(0); 
   

2. wkładka zawalił div

   var div = document.createElement(...) 
   range.insertNode(div) 
   

3. get div współrzędne

4. usunąć div