¿Cómo Copiar al portapeles el valor de un elemento con Formato?

Question

//En el momento este código sólo Copia pero no lo hace conservando el formato

<!DOCTYPE html>
<html>
<body>

<b><p id="demo">Caso con formato.</p></b>
 <button onclick="ejecutar('demo')">Copiar</button>  <BR><BR>

<script>

function ejecutar(idelemento){
     var aux = document.createElement("input");
  aux.setAttribute("value", document.getElementById(idelemento).innerHTML);
  document.body.appendChild(aux);
  aux.select();
  document.execCommand("copy");
  document.body.removeChild(aux);
}
</script>

</body>
</html>

Creo que ese es mi código, gracias por apuntar los fallos. Lo he modificado un poco y ahora te pongo una respuesta — Alvaro Montoro, Apr 20 '17 at 17:07

score 3 · Accepted Answer · answered Apr 20 '17 at 17:14

Buen ojo. Ese código no va a funcionar correctamente si quieres que se copie el formato porque lo que se está haciendo es copiar el contenido del elemento indicado como valor de un input de tipo text por lo que el código HTML se va a "perder".

Una solución sería copiar el contenido del elemento a un div que sea contentEditable, de ese modo el formato no se perderá cuando se copie. Aquí te dejo un ejemplo:

Nota: he modificado un poco tu HTML porque no era válido y nunca se iba a copiar el formato

Dale al botón de copiar y luego pulsa en la caja de texto (es un div editable y pega el texto). Ahora se copiará con negrita.

function ejecutar(idelemento){
  var aux = document.createElement("div");
  aux.setAttribute("contentEditable", true);
  aux.innerHTML = document.getElementById(idelemento).innerHTML;
  aux.setAttribute("onfocus", "document.execCommand('selectAll',false,null)"); 
  document.body.appendChild(aux);
  aux.focus();
  document.execCommand("copy");
  document.body.removeChild(aux);
}

#destino {
  width:400px;
  height:100px;
  border:1px solid #ccc;
}

<p id="demo"><b>Caso con formato.</b></p>
<button onclick="ejecutar('demo')">Copiar</button> 


<div id="destino" contentEditable="true">
</div>

¿Cómo Copiar al portapeles el valor de un elemento con Formato?

1 Answers1

Linked