¿Cómo puedo copiar contenido de texto enriquecido al portapapeles con JavaScript?

3 minutos de lectura

avatar de usuario
marv

Premisa

Necesito ayuda para copiar texto enriquecido al portapapeles usando JavaScript. He buscado y no he encontrado nada que se adapte a mis necesidades específicas.

Código

function ctrlA1(corp) {
  with(corp) {}
  if (document.all) {
    txt = corp.createTextRange()
    txt.execCommand("Copy")
  } else
    setTimeout("window.status=""", 5000)
}
<div id="sc1">hello <br> <b> world </b> </div>
<button onclick="ctrlA1(document.getElementById('sc1') )"></button>

Problema

El código antes mencionado no funciona y está dando como resultado un object expected error. ¡Cualquier ayuda es apreciada! He visto una biblioteca por ahí llamada zeroclipboardpero preferiría escribir mi propia función.


Editar:

Ahora tengo esta función para seleccionar texto en la página. ¿Es posible escribir una fórmula para copiar el rango seleccionado tal cual?

function containerSelect(id) {
  containerUnselect();
  if (document.selection) {
    var range = document.body.createTextRange();
    range.moveToElementText(id);
    range.select();
  } else if (window.getSelection) {
    var range = document.createRange();
    range.selectNode(id);
    window.getSelection().addRange(range);
  }
}
<label onclick="containerSelect(this); select_all()">
  <p>hello world</p>
  <img src="https://stackoverflow.com/questions/23934656/imagepath.png">
</label>

Este pequeño complemento JS copia texto enriquecido sin usar Flash:
https://www.npmjs.com/package/clipboard-js

esta basado en https://clipboardjs.com/ – pero es una actualización en mi opinión, porque el original solo admite texto sin formato.

El código es sencillo:

clipboard.copy({
    "text/html": "<i>Markup</i> <b>text</b>. Paste me into a rich text editor."
});

  • Funciona de maravilla, y de hecho es simple.

    – Estera

    9 de diciembre de 2016 a las 9:02

  • Con los navegadores modernos, si solo desea COPIAR TEXTO ENRIQUECIDO, hay una solución muy fácil sin usar ningún paquete. Ver jsfiddle.net/jdhenckel/km7prgv4/3

    – John Henkel

    14 de diciembre de 2017 a las 17:55


  • @JohnHenckel, ¡eso es fantástico! ¡Deberías convertirlo en una respuesta!

    – Dan Lensky

    24 de abril de 2018 a las 3:50

  • Solo para señalar que para IE, la solución de @SFlagg no copiará texto enriquecido, sino solo texto sin formato

    – gordon613

    30 de mayo de 2018 a las 14:56


  • No puedo hacer que esto funcione si el texto enriquecido contiene imágenes.

    – Jules Collé

    5 de septiembre de 2018 a las 9:36

avatar de usuario
marv

¡Busqué durante una semana y finalmente encontré mi respuesta! para aquellos de ustedes que buscan copiar texto enriquecido al portapapeles con javascript, luego use la función en el enlace a continuación, funciona de maravilla. no hay necesidad de flash y otras cosas sugeridas 🙂

Copiando una imagen al portapapeles usando JavaScript/jquery

  • Eso es para imágenes, no para texto enriquecido. Y de todos modos es solo IE 🙁

    – John Henkel

    14 de diciembre de 2017 a las 16:59

avatar de usuario
Pikamander2

Aquí hay una solución antigua basada en Flash. Debido a la descontinuación de Flash, ya no debería usarse en entornos de producción.

https://github.com/zeroclipboard/zeroclipboard

  • Eso es para imágenes, no para texto enriquecido. Y de todos modos es solo IE 🙁

    – John Henkel

    14 de diciembre de 2017 a las 16:59

avatar de usuario
antoinemopa

Aquí hay un ejemplo que probé usando la nueva API de Portapapeles:

const content="<a href="http://google.com/">test</a>";
const blob = new Blob([content], {type: 'text/html'});
const clipboardItem = new window.ClipboardItem({ 'text/html': blob });
navigator.clipboard.write([clipboardItem]);

Usando este método, puede copiar html al portapapeles. Una cosa útil a tener en cuenta es que esto puede incluir imágenes (que pueden ser URL de datos). Esta es la única forma que encontré para pegar varias imágenes en el portapapeles.

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad