ser elegida la posición del texto

Question

Actualmente un me estoy el texto seleccionado en el navegador haciendo esto:

window.getSelection(); 

ahora tengo que mostrar un texto de ayuda por encima de ese texto al pulsar una tecla personalizable (tenga en cuenta que el ratón podía ya no estar sobre el texto), entonces para hacer eso necesito la posición absoluta de ese texto seleccionado.

¿Hay una manera de hacer eso, tal vez envolviendo ese texto dentro de una etiqueta y luego conseguir las compensaciones?

¿Alguna idea?

PD: tienen que trabajar de cromo, no para todos los navegadores.

PS2: Lo siento por mi mierda Inglés.

Answer 1

La forma más fácil es insertar un elemento marcador temporal al principio o al final de la selección y obtener su posición. He demostrado cómo hacer esto antes de desbordamiento de pila: How can I position an element next to user text selection?

Answer 2

s = window.getSelection(); 

Devuelve una selección. Así que intente

s = window.getSelection(); 
oRange = s.getRangeAt(0); //get the text range 
oRect = oRange.getBoundingClientRect(); 

oRect será el rectángulo delimitador en las coordenadas del cliente (fijo).

Answer 3

Antes de utilizar getBoundingClientRect, lo que necesita saber this note:

CSSOM borrador de trabajo especifica que devuelve un ClientRect para cada cuadro de la frontera

Y por esta 'estándar':

Para un elemento en línea, las dos definiciones son las mismas. Pero para un elemento de bloque, Mozilla solo devolverá un único rectángulo.

Así que si cualquiera que lea este post quiere una solución general para las posiciones más precisas y diseños de textos seleccionados, sugiero los siguientes enfoques:

Opción 1: Encuentra exacta de inicio y y punto de textos que termina por inserting invisible elements. Luego calcule los rectángulos de línea seleccionados con la altura de línea calculada extraída y el ancho del contenedor. API en uso: window.getComputedStyle.

• Pro: el resultado sería el más preciso para cada línea de texto.
• Con: 1) Si la selección es a través de varios nodos con diferentes alturas de línea y anchuras, el algoritmo se vuelve compleja. 2) Y debe implementar el algoritmo de cálculo, que consume demasiado tiempo al implementar una característica simple.

Opción 2: envolver cada texto con un elemento en línea cuidadosamente labrada, extrayendo diseño de cada cuadro, y combinar los resultados en las líneas.

• Pro: Funciona para todas las selecciones continuas (que básicamente significa todos los casos en las implementaciones actuales del navegador principal). Buena precisión para cada línea de textos.
• Con: 1) Su resultado es un poco inexacto en algunos casos, ya que agrega anchos de error de kerning. 2) Es lento en una gran selección de textos.

Para la opción 2, rangeblock es una implementación existente con una API sencilla que le da la disposición de la absolución de cada línea de texto:

let block = rangeblock.extractSelectedBlock(window, document); 
console.info("Text layout: " + JSON.stringify(block.dimensions)); 
// output: Text layout: {Left: 100, Top: 90, Width: 200, Height: 50}