Pourquoi IE7 ne copie-t-il pas correctement les blocs <pre><code> dans le presse-papiers ?

Question

Nous avons remarqué qu'IE7 a un comportement étrange avec les blocs de code postés sur Stack Overflow. Par exemple, ce petit bloc de code :

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

Copié-collé depuis IE7, ça donne ceci :

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

Ce n'est pas exactement ce que nous avions à l'esprit, mais la source HTML sous-jacente a l'air bien ; si vous regardez la source, vous verrez ceci :

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

Alors, qu'est-ce qu'on fait de mal ? Pourquoi IE7 ne peut pas copier et coller ce HTML de manière rationnelle ?

Mise à jour : cela concerne spécifiquement <pre> <code> qui sont modifiés en cours d'exécution via JavaScript. Le HTML natif s'affiche et se copie correctement ; c'est la version modifiée par JavaScript de ce HTML qui ne se comporte pas comme prévu. Notez que le copier-coller dans WordPad ou Word fonctionne parce qu'IE place un contenu différent dans le presse-papier du texte enrichi par rapport au presse-papier du texte brut dont le Bloc-notes tire ses données.

Answer 1

Il semble que ce soit un bogue connu pour IE6 et prettify.js a une solution de contournement pour cela. Plus précisément, il remplace les balises BR par ' \r\n '.

En modifiant la vérification pour permettre l'utilisation d'IE6 ou 7, le copier-coller fonctionnera correctement à partir d'IE7, mais il sera rendu avec une icône nouvelle ligne suivi d'un espace . En vérifiant la présence d'IE7 et en fournissant simplement un ' \r au lieu d'un \r\n Il continuera à copier-coller et à s'afficher correctement.

Ajoutez ce code à prettify.js :

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

puis modifiez la fonction prettyPrint comme suit :

   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);
          }

Vous pouvez voir un exemple de travail ici .

Nota: Je n'ai pas testé le contournement original dans IE6, donc je suppose qu'il rend sans l'espace causé par le ' \n que l'on voit dans IE7, sinon la correction est plus simple.

Answer 2

Voici le problème :

Your code colorization script replaces line breaks with <br /> tags. Lors du copier/coller, IE7 ne traduit apparemment pas la balise <br /> en un saut de ligne comme il le fait pour l'écran.

En d'autres termes, votre code devient ceci :

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

Mais tu veux que ça devienne ça :

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

Dans la dernière version de prettify.js sur Google Code, la ligne responsable est la ligne 1001 (partie de recombineTagsAndDecorations) :

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

Modifié, sur la base des commentaires :
Pour IE7, c'est ce que la ligne devrait probablement être modifiée :

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

(En supposant que newlineRe est un espace réservé).

Cette correction est également valable dans Chrome, et FFX3... Je ne suis pas sûr de savoir quels navigateurs (s'il y en a) ont besoin des balises <br />.

Mise à jour : Plus d'informations dans ma deuxième réponse :
Pourquoi IE7 ne copie-t-il pas correctement les blocs <pre><code> dans le presse-papiers ?

Answer 3

Cela ressemble à un bug dans IE, BR à l'intérieur du PRE o CODE ne sont pas convertis en nouvelles lignes dans le tampon de copie du texte brut. Le tampon de copie de texte riche est correct, et le collage fonctionne comme prévu pour des applications telles que wordpad .

Le script Prettify, qui colore le code, supprime les éléments suivants todo les espaces blancs et les remplace par des balises HTML pour les espaces et les nouvelles lignes. Le code généré ressemble à quelque chose comme ceci :

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

Le site PRE y CODE sont rendues par défaut avec le style CSS de {whitespace : pre} . Dans ce cas, IE ne parvient pas à tourner le BR en nouvelles lignes. Cela fonctionnerait sur votre HTML original parce qu'IE réussirait à transformer les nouvelles lignes actuelles en nouvelles lignes.

Pour le réparer, vous avez 3 possibilités. (Je présume que vous voulez un joli HTML et la capacité de bien fonctionner avec et sans javascript activé sur le client) :

1. Vous pouvez placer le code à l'intérieur d'un div normal et utiliser le CSS pour le rendre en utilisant les éléments suivants {whitespace : pre} . Il s'agit d'une solution simple, mais qui pourrait ne pas plaire aux puristes du balisage HTML.

2. Vous pourriez avoir deux copies du code, l'une utilisant le code correct PRE / CODE et une autre dans un div normal. Dans votre CSS, vous masquez la div normale. En utilisant le javascript, vous prétendez la div normale et cachez la version pré-codée.

3. Modifier le script de prettify pour qu'il reconnaisse qu'il agit sur une PRE o CODE et de ne pas remplacer les espaces dans cet événement.

---

Notas:

• Ce qui est important, ce n'est pas le HTML dans votre source, mais le HTML qui est généré après que le script de prettify ait été exécuté dessus.

• Ce bogue est toujours présent, même si le mode d'espacement des blancs de l'option PRE est changé en normal à l'aide de CSS.

Answer 4

Ce site a abordé la question : http://www.developerfusion.com/tools/convert/csharp-to-vb/

Je suggère un bouton "Copier dans le presse-papiers" dans le cadre de la boîte d'affichage du code. Ce bouton permettrait de copier la version de l'information affichée sous forme de texte brut. Le texte brut pourrait être stocké comme une propriété interne de la page.

Answer 5

Mauvaise nouvelle : aucune des corrections proposées ne fonctionne. Modification de prettify.js autour de la ligne 1000

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

Cela provoque un double espacement dans les autres navigateurs, et toujours ne résout pas le problème de la copie d'IE7 dans le bloc-notes ! Donc, même si j'ai détecté sélectivement IE7, ce "correctif" ne résout rien.

Je suppose qu'il s'agit simplement d'un bogue dans IE7 lié à la reconstruction par JavaScript d'un fichier <pre> élément -- peu importe le nombre de \n que j'y ai mis, rien ne change en ce qui concerne le comportement du collage dans le bloc-notes.