Próbuję odbudować obiekt Range() w przeglądarce klientów za pomocą websockets.Przebudowywanie zakresu z węzłem, startOffset i endOffset
https://jsfiddle.net/k36goyec/
pierwsze jestem coraz obiekt klasy w mojej przeglądarce i Node że zakres zaczyna się:
var range = window.getSelection().getRangeAt(0);
var node = range.startContainer
jestem przechodzącej trzy parametry ponad WebSocket do funkcji Zakres budowniczy na klientach przeglądarka.
var text = node.parentNode.textContent;
var startOffset = range.startOffset
var endOffset = range.endOffset
dane te są przekazywane do mojej funkcji buildRange:
/**
*
*/
buildRange: function(text, startOffset, endOffset){
var node = this.getNodeByText(text); // get the Node by its contents
var range = document.createRange();
range.setStart(node, startOffset);
range.setEnd(node, endOffset);
span = document.createElement('span');
span.style.backgroundColor = this.color;
$(span).addClass('hl');
range.surroundContents(span);
},
Jak widać poniżej, jestem coraz węzeł w przeglądarce klientów poprzez zapętlenie przez wszystkie elementy na stronie i porównanie jej zawartość z tekstem:
/**
*
*/
getNodeByText: function(text){
var all = document.getElementsByTagName("*");
for (var i = 0; i < all.length; i++) {
if (all[i].textContent === text) {
return all[i];
}
}
},
Używam setStart() i setEnd(), aby ustawić zakres mojego wyboru na węźle.
Problemy!
range.startOffset/endOffset Spec mówi co następuje:
If the startNode is a Node of type Text, Comment, or CDATASection, then startOffset is the number of characters from the start of startNode. For other Node types, startOffset is the number of child nodes between the start of the startNode.
Kiedy wybrać zakres tekstu pojawia się następujący błąd:
IndexSizeError: Index or size is negative or greater than the allowed amount
To dlatego, że jestem przekazując przesunięcie jak 0, 10 (wybrano 10 znaków), ale węzeł jest węzłem elementu, a nie węzłem tekstowym.
po prostu nie może wydawać się niezawodnie uzyskać węzeł tekstowy, mogę tylko sam węzeł elementu ...
Q:
Jak można wiarygodnie odbudować szeregu z węzłem i przesunięcia?
Używasz metody getElementsByTagName, która zwróci elementy. Proponuję przejrzenie https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes i https://developer.mozilla.org/en/docs/Web/API/ Węzeł/nodeType i – Orangesandlemons