Wybierz zakres w contenteditable div

Mam contenteditable div i kilka akapitów w nim.Wybierz zakres w contenteditable div

Oto mój kod:

<!DOCTYPE HTML> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    </head> 
    <body> 
     <div id="main" contenteditable="true" 
      style="border:solid 1px black; width:300px; height:300px"> 
      <div>Hello world!</div> 
      <div> 
       <br> 
      </div> 
      <div>This is a paragraph</div> 
     </div> 
    </body> 
</html>

Zakładając, chcę dokonać wyboru zakresu, który będzie zawierał ciąg „! To jest świat”

Jak to zrobić?

Źródło

2010-09-22 angry kiwi

Po przytrzymaniu węzłów tekstowych zawierających zaznaczony tekst jest to łatwe. To, jak je uzyskasz, zależy od tego, jak bardzo jest to generyczne. W tej chwili, zanim użytkownik je zredaguje, zadziała:

var mainDiv = document.getElementById("main"); 
var startNode = mainDiv.firstChild.firstChild; 
var endNode = mainDiv.childNodes[2].firstChild; 

var range = document.createRange(); 
range.setStart(startNode, 6); // 6 is the offset of "world" within "Hello world" 
range.setEnd(endNode, 7); // 7 is the length of "this is" 
var sel = window.getSelection(); 
sel.removeAllRanges(); 
sel.addRange(range);

Źródło

2010-09-22 21:31:40

'removeAllRanges', a następnie' addRange' były częściami, których mi brakowało w mojej sytuacji. Dzięki za kod! – siannopollo

Wybierz zakres w contenteditable div

Odpowiedz

Powiązane problemy