2011-09-16 35 views
7

Yo,quitar los estilos de texto al copiar/cortar el uso de CSS o Javascript

bien ha habido noodling en este caso por un tiempo: Cómo copiar/cortar texto con estilo sin traer a lo largo de cualquier equipaje estilo (color de fondo, color , etc.)?

par de rutas de los ataques que se han frustrado:

  1. estilo del texto de forma diferente utilizando :: seleccione?no funciona, :: estilo no se copia
  2. estilo del texto seleccionado usando jQuery seleccione vinculanteEsto sólo funciona para las entradas, no p, DIVS
  3. interceptar y eliminar el estilo mediante la unión un evento para copiar/pegar usando jQuery?No se puede acceder al objeto copiado para eliminar cosas; intenté usar e.preventDefault(); a continuación, devolver el objeto de evento pero que tampoco funcionó
  4. ¿Modificar los datos del portapapeles una vez que se han guardado?También hay dados, la mayoría de los navegadores no le dejará en esto sin flash y algún tipo de confirmación

De todos modos, los pensamientos? Parece que sería muy útil para sitios que tienen colores de fondo blanco.

+0

Solo para estar seguro de que lo entiendo, ¿quiere copiar texto sin formato al portapapeles sin formatear? –

+0

Sí. Me gustaría evitar la copia/corte predeterminada de los estilos de captura. O incluso awomenar selectivamente, digamos dejar font-family y font-weight pero nix color and background. Si tuviera que adivinar cómo hacerlo, podría – Mojowen

+0

Cambiar el texto antes de que se copie. Una vez que las cosas se entregan en el portapapeles, parecen inaccesibles a través de javascript. – Mojowen

Respuesta

4

No tengo tiempo para codificar un ejemplo ahora, pero podría hacer esto para cortar/copiar desencadenado por atajos de teclado. No funcionaría para cortar/copiar a través del menú contextual o las opciones del menú Editar porque depende de cambiar la selección del usuario antes de que el evento de corte o copia se dispare.

Los pasos:

  1. manejar la Ctrl - C y Ctrl - X atajos de teclado y los equivalentes de Mac.
  2. En este controlador, cree un elemento fuera de pantalla (posición absoluta e izquierda -10000px, por ejemplo) y copie el contenido seleccionado en él.Puede hacer esto usando window.getSelection().getRangeAt(0).cloneContents(), aunque necesitará un código separado para IE < 9 y debe verificar que la selección no esté contraída.
  3. Haga lo que quiera para cambiar el estilo del contenido del elemento fuera de pantalla.
  4. Mueva la selección para abarcar el contenido del elemento fuera de pantalla para que este contenido se corte o copie.
  5. Agregue un breve retraso (unos milisegundos) usando window.setTimeout() que llama a una función que elimina el elemento fuera de pantalla y restaura la selección original.
+0

Al hacerlo, ¿hay algún indicio sobre cómo mover la selección? – Mojowen

+0

@ Mojoowen: Aquí hay una función de ejemplo para seleccionar el contenido de un elemento: http://stackoverflow.com/questions/2044616/select-a-complete-table-with-javascript-to-be-copied-to-clipboard/ 2044793 # 2044793 –

+1

Creo que lo tengo, gracias Tim. Con algo de limpieza, se parece mucho a esto: http://jsfiddle.net/mojowen/hCHWy/ – Mojowen

0

¿Necesita que esto ocurra en el navegador ... para cada usuario?

Si no - y es justo para usted - entonces puede hacerlo con el software Clipmate.

http://www.clipmate.com/index.htm

Tiene una característica que elimina todo el estilo.

+0

Estaba buscando que esto suceda en cualquier copia/corte, no solo algo específico. – Mojowen

1

Una vez que haya activado la copia o corte puede dañar las etiquetas HTML y sólo el texto, algunas expresiones regulares

var String = Sample.replace(/(<([^>]+)>)/ig,""); 

Además, si usted tiene su texto almacenado en un div con id "sample_div" Uso var String=$('sample_div').text(''); para obtener solo el texto dentro de

+0

Entonces, ¿cómo usaría esto en el contexto de un evento de copia/corte? Lo he intentado con: 'jQuery (documento) .bind ('copia de corte', función (e) { var String = Sample.replace (/ (<([^>] +)>)/ig," "); cadena de retorno; }); ' No se reconoce la muestra – Mojowen

Cuestiones relacionadas