Seleccione el rango en contenteditable div

Tengo un contenteditable div y algunos párrafos en él.Seleccione el rango en contenteditable div

Aquí está mi código:

<!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>

Suponiendo, quiero hacer una selección de la gama que contendrá la cadena "! Esto es mundo"

cómo hacerlo?

Fuente

2010-09-22 angry kiwi

Una vez que tenga los nodos de texto que contienen el texto que desea resaltar, es fácil. Cómo obtienes eso depende de cuán genérico necesites que sea. Ya que es en este momento, antes de que el usuario ha editado, el siguiente trabajo:

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);

Fuente

2010-09-22 21:31:40

'' removeAllRanges' y luego addRange' eran las piezas que me estaba perdiendo por mi situación. Gracias por el código! – siannopollo

Seleccione el rango en contenteditable div

Respuesta

Cuestiones relacionadas