window.getSelection() me da el texto seleccionado, pero quiero el HTML

Question

Extiendo un editor WYSIWYG HTML (para Firefox), quiero agregar etiquetas alrededor de una selección. No puedo encontrar una función para lograr esto en el Mozilla Midas specification.

Hay un comando para reemplazar la selección con HTML.
Entonces, si pudiera leer los contenidos de la selección, podría agregar mis etiquetas a esta cadena.

window.getSelection() casi funciona, pero me da nsISelection que se convierte en una cadena de texto sin formato.

PS: document.getSelection() devuelve la cadena de texto sin formato ni siquiera un nsISelection.

Answer 1

Eche un vistazo a DOM Range spec. Usted puede obtener una Range de la selección del usuario en Firefox usando:

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

Tenga en cuenta que algunos navegadores, incluyendo Firefox, permiten múltiples selecciones, que se puede acceder a través del método de la selección getRangeAt().

El Range se expresa en términos de nodos DOM y desplazamientos dentro de esos nodos. Una vez que obtenga su Range, no es sencillo hacer exactamente lo que desea, ya que los límites del rango podrían estar en diferentes nodos en diferentes niveles del árbol DOM, por lo que simplemente rodear el contenido del rango con una etiqueta no siempre es posible. Usted puede ser capaz de hacer algo como lo siguiente, a pesar de que va a crear un nuevo elemento de bloque para contener el contenido seleccionado:

var range = window.getSelection().getRangeAt(0); 
var selectionContents = range.extractContents(); 
var div = document.createElement("div"); 
div.style.color = "yellow"; 
div.appendChild(selectionContents); 
range.insertNode(div); 

Otro, hacky, alternativa es utilizar el método de documentexecCommand() para modificar la selección (por ejemplo, configurándolo en un color particular) y luego usando document.querySelectorAll o alguna biblioteca de selectores para seleccionar elementos con ese color y luego aplicarles un estilo.

Answer 2

La respuesta de Tim Down está en el camino correcto. Sin embargo, un problema es que extractContents() eliminará la selección de dom. Puede usar

window.getSelection().getRangeAt(0).cloneContents(); 

para obtener una copia de lo que está seleccionado. Luego puede envolverlo con su nueva etiqueta y luego reemplazar la selección con ella. La preocupación de Tim Down por el rango que abarca múltiples elementos HTML es ciertamente válida. Creo que una vez que obtienes el rango, 'arregla' el html, pero cuando lo vuelves a colocar puede causar problemas. Here es un buen recurso en el objeto Range.

Answer 3

window.getSelection() devolverá un objeto. Puede usar el objeto de selección devuelto como una cadena llamando al método de objetos .toString().

var selObj = window.getSelection(); 
var selectedText = selObj.toString(); 

https://developer.mozilla.org/en/DOM/window.getSelection