html - w3schools - ¿Por qué IE7 no copia los bloques<pre><code> al portapapeles correctamente?

semantics html

Question

Notamos que IE7 tiene un comportamiento extraño con bloques de código publicados en Stack Overflow. Por ejemplo, este pequeño bloque de código:

public PageSizer(string href, int index)
{
    HRef = href;
    PageIndex = index;
}

Copiar y pegar desde IE7, termina así:

public PageSizer(string href, int index){ HRef = href; PageIndex = index; }

No es exactamente lo que teníamos en mente ... la fuente HTML subyacente realmente se ve bien; si ves Fuente, verás esto:

<pre><code>public PageSizer(string href, int index)
{
    HRef = href;
    PageIndex = index;
}
</code></pre>

Entonces, ¿qué estamos haciendo mal? ¿Por qué IE7 no puede copiar y pegar este HTML de manera racional?

Actualización: esto específicamente tiene que ver con <pre> bloques <pre> <code> que se están modificando en tiempo de ejecución a través de JavaScript. El HTML nativo se procesa y copia correctamente; es la versión modificada de JavaScript de ese HTML que no se comporta como se esperaba. Tenga en cuenta que copiar y pegar en WordPad o Word funciona porque IE está colocando contenido diferente en el portapapeles de texto enriquecido en comparación con el portapapeles de texto plano del que obtiene sus datos el Bloc de notas.

Answer 1

@Jeff Atwood Es la idea correcta, pero la implementación aún necesita trabajo. Creo que mi código de aire simplemente no lo cortó :)

Sospecho que la solución que mencioné anteriormente no funciona porque embellecer está haciendo un procesamiento adicional en el texto después de llamar a la línea ~ 1000.

Tratando de rastrear el contenido hacia atrás desde el momento en que se agregó a la página, me encontré con este comentario alrededor de la línea 1227:

// Replace <br>s with line-feeds so that copying and pasting works
// on IE 6.
// Doing this on other browsers breaks lots of stuff since /r/n is
// treated as two newlines on Firefox, and doing this also slows
// down rendering.

Cuando quité la condición isIE6 del código, funcionó principalmente en IE7 (había un salto de línea adicional en la parte superior e inferior) y Firefox 3 ... Pero supongo que causa problemas con las versiones anteriores de FFX .

Por lo menos, parece que IE7 requerirá / r / n, en lugar de simplemente / n. Averiguar exactamente qué funcionará con qué navegadores tomará una configuración de prueba más extensa de la que tengo a mano en este momento.

De todos modos, insertar el / r / n para IE7 parece ser básicamente lo que debe suceder. Continuaré pinchando para ver si puedo reducirlo aún más.

ACTUALIZACIÓN: IE7 parece quitar los caracteres de nueva línea (/ r o / n) de las cadenas que están asignadas a una propiedad innerHTML. Parece que deben volver a agregarse, alrededor de la línea 1227.

Una solución correcta probablemente significaría insertar una etiqueta de marcador de posición alrededor de la línea 1000 y luego reemplazarla alrededor de la línea 1227.

Answer 2

Aquí está el problema:

Su script de colorización de código reemplaza los saltos de línea con etiquetas <br />. Al copiar / pegar, IE7 aparentemente no convierte la etiqueta <br /> en un salto de línea como lo hace para la pantalla.

En otras palabras, tu código se convierte en esto:

public PageSizer(string href, int index)<br />{<br />    HRef = href;<br />    PageIndex = index;<br />    }

Pero quieres que se convierta en esto:

public PageSizer(string href, int index)<br />
{<br />
    HRef = href;<br />
    PageIndex = index;<br />
}<br />

En la última versión de prettify.js en Google Code, la línea responsable es la línea 1001 (parte de recombineTagsAndDecorations):

html.push(htmlChunk.replace(newlineRe, ''<br />''));

Editado, basado en los comentarios:
Para IE7, a esto es a lo que probablemente debería cambiarse la línea:

html.push(htmlChunk.replace(newlineRe, ''/n''));

(Suponiendo que newlineRe es un marcador de posición).

Esta solución también se mantiene en Chrome y FFX3 ... No estoy seguro de qué navegadores (si los hay) necesitan las etiquetas <br />.

Actualización: más información en mi segunda respuesta:
¿Por qué IE7 no copia los bloques <pre> <code> al portapapeles correctamente?

Answer 3

Este sitio ha abordado el problema: http://www.developerfusion.com/tools/convert/csharp-to-vb/

Sugiero un botón "Copiar en el portapapeles" como parte del cuadro de visualización del código. Este botón copiaría la versión de la información mostrada como texto sin formato. El texto sin formato podría almacenarse como una propiedad de página interna.

Answer 4

Esto parece un error en IE, las etiquetas BR dentro de PRE o CÓDIGO no se están convirtiendo en nuevas líneas en el búfer de copia de texto sin formato. El búfer de copia de texto enriquecido está bien, por lo que el pegado funciona como se espera para aplicaciones como WordPad .

El script de pretificación, que colorea el código, elimina todos los espacios en blanco y lo reemplaza con etiquetas HTML para espacios y líneas nuevas. El código generado se ve así:

<pre><code>code<br/>&nbsp;&nbsp;code<br/>&nbsp;&nbsp;code<br/>code</code></pre>

Las etiquetas PRE y CODE se representan por defecto con el estilo CSS de {whitespace: pre} . En este caso, IE no puede convertir las etiquetas BR en nuevas líneas. Funcionaría en su HTML original porque IE convertirá correctamente las nuevas líneas en líneas nuevas.

Para arreglarlo tienes 3 opciones. (Supongo que quieres buen HTML y la capacidad de trabajar bien con y sin javascript habilitado en el cliente):

1. Puedes colocar el código dentro de un div normal y usar CSS para renderizarlo usando {whitespace: pre} . Esta es una solución simple, aunque podría no complacer a un purista de marcado HTML.

2. Podría tener dos copias del código, una con las etiquetas PRE / CODE adecuadas y otra con una div normal. En tu CSS, ocultas el div normal. Al usar javascript, se embellece el div normal y se oculta la versión pre / código.

3. Modifique el script de pretificación para reconocer que está actuando sobre un elemento PRE o CODE y para no reemplazar el espacio en blanco en ese evento.

Notas:

• Lo que es importante no es el código HTML en su fuente, sino el HTML que se genera después de ejecutar la secuencia de comandos prettify.

• Este error aún está presente incluso si el modo de espacio en blanco del PRE se cambia a normal con CSS.

Answer 5

Parece que este es un error conocido para IE6 y prettify.js tiene una solución alternativa para él. Específicamente reemplaza las etiquetas BR con ''/ r / n''.

Al modificar la comprobación para permitir IE6 o 7, el método de cortar y pegar funcionará correctamente desde IE7, pero se procesará con una nueva línea seguida de un espacio . Al buscar IE7 y proporcionar solo un ''/ r'' en lugar de un ''/ r / n'' continuará cortando y pegando y renderizando correctamente.

Agregue este código a prettify.js:

function _pr_isIE7() {
  var isIE7 = navigator && navigator.userAgent &&
       //bMSIE 7/./.test(navigator.userAgent);
  _pr_isIE7 = function () { return isIE7; };
  return isIE7;
}

y luego modifique la función prettyPrint de la siguiente manera:

   function prettyPrint(opt_whenDone) {
     var isIE6 = _pr_isIE6();
+    var isIE7 = _pr_isIE7();

...

-        if (isIE6 && cs.tagName === ''PRE'') {
+        if ((isIE6 || isIE7) && cs.tagName === ''PRE'') {
          var lineBreaks = cs.getElementsByTagName(''br'');
+         var newline;
+         if (isIE6) {
+           newline = ''/r/n'';
+         } else {
+           newline = ''/r'';
+         }
          for (var j = lineBreaks.length; --j >= 0;) {
            var lineBreak = lineBreaks[j];
            lineBreak.parentNode.replaceChild(
-               document.createTextNode(''/r/n''), lineBreak);
+               document.createTextNode(newline), lineBreak);
          }

Puedes ver un ejemplo de trabajo aquí .

Nota: No he probado la solución original en IE6, así que supongo que se renderiza sin el espacio causado por la ''/ n'' que se ve en IE7; de lo contrario, la solución es más simple.

Answer 6

Retire el <code> interno. El comportamiento de copiar / pegar de IE podría ver eso como una etiqueta en línea y olvidarse del espacio en blanco visible.

Answer 7

malas noticias: ninguna de las correcciones propuestas funciona. Modificando prettify.js alrededor de la línea 1000

html.push(htmlChunk.replace(newlineRe, ''/n''));

Esto causa doble espacio en otros navegadores, ¡y aún no resuelve el problema de la copia IE7 en el bloc de notas! Entonces, incluso si detecté IE7 selectivamente, esta "corrección" no soluciona nada.

Supongo que quizás sea simplemente un error en IE7 relacionado con la reconstrucción de JavaScript de un elemento <pre> , no importa cuántas / n nuevas líneas coloque ahí, nada cambia w / r / t en el comportamiento del pegado en el bloc de notas.