Agregué un oyente de copia personalizado para cambiar el texto copiado en el portapapeles a otra cosa. Ahora, cuando lo copio como text/html, no funciona en los siguientes casos:
Copiar y pegar en Word (funciona correctamente) Copiar y pegar en el bloc de notas (no se pega nada en absoluto) Copiar y pegar en la barra de URL (no se pega nada en absoluto)
document.getElementById(config.editorEl).addEventListener('copy', function(event) { const range = window.getSelection().getRangeAt(0); const content = range.cloneContents(); const div = document.createElement('div'); div.appendChild(content); $(div) .find('.remove_this_class') .contents() .unwrap(); event.clipboardData.setData('text/html', div.innerHTML); event.preventDefault(); });Sin embargo, cuando reemplazo text/html con text/pegar, funciona correctamente porque las etiquetas html no se procesan.
¿Alguien puede ayudarme a arreglar esto para text/html también?
No puedo justificar tu pregunta, pero mira este código, te ayudó. Porque al copiar puedo pegar el bloc de notas y la barra de URL.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <div id="test" style="width:500px;height: 200px; border: 1px solid sandybrown;"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div> <script> document.getElementById("test").addEventListener('copy', function(event) { const range = window.getSelection(); const selRange = range.getRangeAt(0); const content = selRange.toString(); alert(content); const div = document.createElement('div'); div.style.color = "yellow"; div.appendChild(content); $(div).find('.remove_this_class').contents().unwrap(); event.clipboardData.setData('text/html', div.innerHTML); event.preventDefault(); }); </script> </body> </html>Finalmente, pude adivinar la solución yo mismo. Mientras pegamos usamos getData("DataType"). Entonces, si agrego dataType a "text/html", luego pego en url o en el área de texto que solo permite "texto/simple", getData ("texto/simple") no devolverá nada. Por lo tanto, debemos agregar ambos:
event.clipboardData.setData('text/html', div.innerHTML); event.clipboardData.setData('text/plain', div.innerHTML.toString());
Lo que esto hace es que permitirá pegar para obtener los datos de acuerdo con el tipo de datos y, por lo tanto, también funcionará en la URL.