Para mi aplicación necesito una especie de portapapeles interno con historial. No puedo usar la API del portapapeles (por lo que puedo ver) ya que necesitaría el permiso del usuario, que no es una opción.
Quiero conservar el formato como negrita, cursiva y tachado.
Estaba pensando en obtener el contenido de window.getSelection(), pero no hay forma de clonar fácilmente todo el html que está en la selección.
El contenido tendría que ir a otro elemento contenedor para mostrarse en algún lugar de la aplicación.
Cualquier idea de cómo lograr esto es muy apreciada.
Mejor Matías
EDITAR: ya estoy interrumpiendo el evento de copia y reemplazándolo con una función personalizada. Lo que debo hacer es comenzar en el nodo de anclaje, cortar un posible desplazamiento y avanzar hasta el nodo de enfoque (también con desplazamiento). Además, todas las etiquetas desconocidas o no deseadas (span, h1, div, etc.) deben eliminarse, pero el contenido del texto permanecerá. Espero que alguien ya haya hecho esto o una tarea similar para poder ahorrar algo de tiempo :/
El evento de copy podría ayudarlo, ya que no requiere ningún permiso para funcionar.
var clipHistory = []; document.addEventListener('copy', (event) => { const selection = document.getSelection(); clipHistory.push(selection.toString()); event.preventDefault(); // optional, it prevents to modify the user's clipboard }); // other functions can access clipHistory Lo bueno es que el evento de copy está muy bien soportado.
Desafortunadamente, esta solución elimina el formato, pero una forma de mantenerlo es usar un <div contenteditable id="parse-div"></div> y activar el evento de parse manualmente.
Encontré una clase interesante: la Range , pero no permite establecer un desplazamiento inicial y final de elementos que no sean #texto, hasta donde puedo entenderlo.