bootstrap - javascript copy variable to clipboard

Javascript-Copie la cadena al portapapeles como texto/html

Question

¿Hay alguna forma en javascript de copiar una cadena html (es decir, <b>xx<b> ) en el portapapeles como texto / html, para que luego pueda pegarse en, por ejemplo, un mensaje de Gmail con el formato (es decir, xx en)? negrita)

Existen soluciones para copiar en el portapapeles como texto (texto / plano), por ejemplo, https://stackoverflow.com/a/30810322/460084 pero no como texto / html

Necesito una solución no flash, no jquery que funcione al menos en IE11 FF42 y Chrome.

Idealmente, me gustaría almacenar las versiones de texto y html de la cadena en el portapapeles para poder pegar la correcta dependiendo de si el destino admite html o no.

Answer 1

Dado que esta respuesta ha recibido cierta atención, he reescrito completamente el original desordenado para que sea más fácil de entender. Si desea consultar la versión previa a la revisión, puede encontrarla here .

La pregunta hervida:

¿Puedo usar JavaScript para copiar la salida formateada de algún código HTML al portapapeles de los usuarios?

Responder:

Sí, con algunas limitaciones, puedes.

Solución:

A continuación se muestra una función que hará exactamente eso. Lo probé con tus navegadores requeridos, funciona en todos ellos. IE 11 aunque pedirá confirmación sobre esa acción.

A continuación, puede encontrar una explicación de cómo funciona. Puede probar la función de forma interactiva en este jsFiddle .

// This function expects an HTML string and copies it as rich text.

function copyFormatted (html) {
  // Create container for the HTML
  // [1]
  var container = document.createElement(''div'')
  container.innerHTML = html

  // Hide element
  // [2]
  container.style.position = ''fixed''
  container.style.pointerEvents = ''none''
  container.style.opacity = 0

  // Detect all style sheets of the page
  var activeSheets = Array.prototype.slice.call(document.styleSheets)
    .filter(function (sheet) {
      return !sheet.disabled
    })

  // Mount the container to the DOM to make `contentWindow` available
  // [3]
  document.body.appendChild(container)

  // Copy to clipboard
  // [4]
  window.getSelection().removeAllRanges()

  var range = document.createRange()
  range.selectNode(container)
  window.getSelection().addRange(range)

  // [5.1]
  document.execCommand(''copy'')

  // [5.2]
  for (var i = 0; i < activeSheets.length; i++) activeSheets[i].disabled = true

  // [5.3]
  document.execCommand(''copy'')

  // [5.4]
  for (var i = 0; i < activeSheets.length; i++) activeSheets[i].disabled = false

  // Remove the container
  // [6]
  document.body.removeChild(container)
}

Explicación:

Mire los comentarios en el código anterior para ver dónde se encuentra actualmente en el siguiente proceso:

1. Creamos un contenedor para poner nuestro código HTML en.
2. Diseñamos el contenedor para que esté oculto y detectamos las hojas de estilo activas de la página. El motivo se explicará en breve.
3. Ponemos el contenedor en el DOM de la página.
4. Eliminamos posibles selecciones existentes y seleccionamos los contenidos de nuestro contenedor.

5. Hacemos la copia en sí. Este es en realidad un proceso de varios pasos: Chrome copiará el texto como lo ve, con estilos CSS aplicados, mientras que otros navegadores lo copiarán con los estilos predeterminados del navegador. Por lo tanto, deshabilitaremos todos los estilos de usuario antes de copiar para obtener el resultado más consistente posible.

   1. Antes de hacer esto, ejecutamos prematuramente el comando de copy . Este es un truco para IE11: en este navegador, la copia debe confirmarse manualmente una vez. Hasta que el usuario haga clic en el botón "Confirmar", los usuarios de IE verán la página sin ningún estilo. Para evitar esto, primero copiamos, esperamos la confirmación, deshabilitamos los estilos y volvemos a copiar. En ese momento no obtendremos un diálogo de confirmación ya que IE recuerda nuestra última opción.
   2. Realmente deshabilitamos los estilos de la página.
   3. Ahora volvemos a ejecutar el comando copy .
   4. Volvemos a habilitar las hojas de estilo.
6. Eliminamos el contenedor del DOM de la página.

Y hemos terminado.

Advertencias:

• El contenido formateado no será perfectamente consistente en todos los navegadores.

  Como se explicó anteriormente, Chrome (es decir, el motor Blink) usará una estrategia diferente a la de Firefox e IE: Chrome copiará el contenido con su estilo CSS, pero omitirá cualquier estilo que no esté definido.

  Firefox e IE, por otro lado, no aplicarán CSS específicos de la página, aplicarán los estilos predeterminados del navegador. Esto también significa que tendrán algunos estilos extraños aplicados a ellos, por ejemplo, la fuente predeterminada (que generalmente es Times New Roman ).

• Por razones de seguridad, los navegadores solo permitirán que la función se ejecute como un efecto de la interacción del usuario (por ejemplo, un clic, una pulsación de tecla, etc.)

Answer 2

He hecho algunas modificaciones en la respuesta de Loilo arriba:

• establecer (y luego restaurar) el enfoque en el div oculto evita que FF tenga una recursión interminable al copiar desde un área de texto

• establecer el rango a los hijos internos del div impide que Chrome inserte una imagen adicional al principio

• removeAllRanges on getSelection () evita agregarse a la selección existente (posiblemente no sea necesario)

• probar / atrapar alrededor de execCommand

• ocultando la copia div mejor

En OSX esto no funcionará. Safari no admite execCommand y chrome OSX tiene un error conocido https://bugs.chromium.org/p/chromium/issues/detail?id=552975

código:

clipboardDiv = document.createElement(''div'');
clipboardDiv.style.fontSize = ''12pt''; // Prevent zooming on iOS
// Reset box model
clipboardDiv.style.border = ''0'';
clipboardDiv.style.padding = ''0'';
clipboardDiv.style.margin = ''0'';
// Move element out of screen 
clipboardDiv.style.position = ''fixed'';
clipboardDiv.style[''right''] = ''-9999px'';
clipboardDiv.style.top = (window.pageYOffset || document.documentElement.scrollTop) + ''px'';
// more hiding
clipboardDiv.setAttribute(''readonly'', '''');
clipboardDiv.style.opacity = 0;
clipboardDiv.style.pointerEvents = ''none'';
clipboardDiv.style.zIndex = -1;
clipboardDiv.setAttribute(''tabindex'', ''0''); // so it can be focused
clipboardDiv.innerHTML = '''';
document.body.appendChild(clipboardDiv);

function copyHtmlToClipboard(html) {
  clipboardDiv.innerHTML=html;

  var focused=document.activeElement;
  clipboardDiv.focus();

  window.getSelection().removeAllRanges();  
  var range = document.createRange(); 
  range.setStartBefore(clipboardDiv.firstChild);
  range.setEndAfter(clipboardDiv.lastChild);
  window.getSelection().addRange(range);  

  var ok=false;
  try {
     if (document.execCommand(''copy'')) ok=true; else utils.log(''execCommand returned false !'');
  } catch (err) {
     utils.log(''execCommand failed ! exception ''+err);
  }

  focused.focus();
}

vea jsfiddle donde puede ingresar un segmento html en el área de texto y copiar al portapapeles con ctrl + c.