El usuario puede escribir un texto en un div que tenga el atributo contenteditable="true" y también puede seleccionar un texto. Ahora me gustaría generar el texto seleccionado.
Esto es lo que he probado:
<div (select)="getSelectedText()" contenteditable="true" #editor id="editor"></div> getSelectedText(): void { console.log(window.getSelection()); } Esto no funciona, probablemente porque (select) no está disponible para div . Esto es lo que dice la documentación del mismo:
Elemento: seleccionar evento
El evento de selección se activa cuando se ha seleccionado algún texto.
...
El evento no está disponible para todos los elementos en todos los idiomas. Por ejemplo, en HTML, los eventos de
selectsolo se pueden distribuir en los elementos de formulario<input type="text">y<textarea>.
¿Hay una alternativa a esto en Angular?
No hay mucho que pueda hacer más que escuchar el mouse, ya sea el evento keyup:
HTML
<div (keyup)="getSelectedText()" (mouseup)="getSelectedText()" contenteditable="true" #editor id="editor"></div>TS
getSelectedText(){ console.log(document.getSelection()?.toString()) }Debe usar un evento mouseup y mouseout en su div y luego llamar a window.getSelection().toString() para obtener el texto seleccionado.
<div (mouseup)="getSelectedText()" (mouseout)="getSelectedText()"contenteditable="true" #editor id="editor"></div> getSelectedText(): void { if (window.getSelection) { window.getSelection().toString(); } }