Copier <p> dans le presse papier

Version imprimable

Bonjour,

Je travaille actuellement sur un projet qui génère du code VBA. Après que l'utilisateur ai renseigné les champs input, il clique sur "Créer" et cela génère un code VBA.

Une fois que celui-ci est fait, j'aimerai faire un fonction copier qui récupère le code généré, pour que l'utilisateur n'est plus qu'à le coller dans l'éditeur Visual Basic for Application.

J'ai essayé les méthodes document.execCommand("copy") et clipboard rien n'y fait :(

Pouvez-vous me dire comment récupérer dans le presse papier le contenu de la balise HTML suivante :

Code:

<p id="show_code_macro1"></p>

Sachant que cette balise est alimentée par le contenu issu de la fonction JS suivante :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function InstertionColonnesMultiples() {
          let Valeur1Macro1 = document.getElementById("InputVal1macro1").value;
          let Valeur2Macro1 = document.getElementById("InputVal1macro1").value;
          let Valeur3Macro1 = document.getElementById("InputVal2macro1").value;
          if (typeof Valeur1Macro1 !== 'undefined' && Valeur1Macro1 && Valeur3Macro1) {
              document.getElementById("show_code_macro1").innerHTML = 
              '<div class="Pre"><span class="MotClef">Sub </span>' + 'InsertMultipleColumns()'  + '<br/>' 
              + '<span class="MotClef">Dim </span>i <span class="MotClef">As Integer</span>' + '<br/>' 
              + 'Range("' + Valeur1Macro1 + ':' + Valeur2Macro1 + '").Select' + '<br/>'
              + '<span class="MotClef">On Error GoTo </span>Last' + '<br/>'
              + '&nbsp;' + '<span class="MotClef">' + 'For</span> i = 1 <span class="MotClef">To</span> ' + Valeur3Macro1 + '<br/>' 
              + '&nbsp;' + '&nbsp;' + 'Selection.Insert Shift:=xlToRight, CopyOrigin:=xlFormatFromRightorAbove</span>' + '<br/>' 
              + '&nbsp;' + '<span class="MotClef">Next</span> i' + '<br/>'
              + 'Last: <span class="MotClef">Exit Sub</span>' + '<br/>'
              + '<span class="MotClef">End Sub</span></div>';
              swal("Tadaaamm", "Votre macro est prête !", "success");
          }
          else{
              swal("Oooups", "Vous avez oublié de saisir une ou plusieurs valeurs", "error");
          };
        }

Le code HTML dans son ensemble :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!doctype html>
 
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>Insererdescolonnes</title>
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
  </head>
 
  <body>
 
      <header>
      </header>
 
    <main>
      <section id="content">
        <h3>Insérer des colonnes</h3>
        <p>Ce code vous permet de saisir plusieurs colonnes en un seul clic.<br>
            Vous devez simplement renseigné la colonne à partir de laquelle vous souhaitez ajouter d'autres colonnes et indiquer le nombre.</p>
        <label>Ciblez la colonne de départ</label><input type="text" placeholder="A" id="InputVal1macro1"><br>
        <label>Saisissez le nombre de colonnes à insérer</label><input type="text" placeholder="6" id="InputVal2macro1"><br>
        <p class="actions">
          <button onclick="InstertionColonnesMultiples()" class="button special">Créer</button>
          <button onclick="copier()" class="button special icon fa-copy">Copier</button></p>
          <p id="show_code_macro1"></p>
      </section>
    </main>
 
    <footer>
    </footer>
 
      <script>
        function InstertionColonnesMultiples() {
          let Valeur1Macro1 = document.getElementById("InputVal1macro1").value;
          let Valeur2Macro1 = document.getElementById("InputVal1macro1").value;
          let Valeur3Macro1 = document.getElementById("InputVal2macro1").value;
          if (typeof Valeur1Macro1 !== 'undefined' && Valeur1Macro1 && Valeur3Macro1) {
              document.getElementById("show_code_macro1").innerHTML = 
              '<div class="Pre"><span class="MotClef">Sub </span>' + 'InsertMultipleColumns()'  + '<br/>' 
              + '<span class="MotClef">Dim </span>i <span class="MotClef">As Integer</span>' + '<br/>' 
              + 'Range("' + Valeur1Macro1 + ':' + Valeur2Macro1 + '").Select' + '<br/>'
              + '<span class="MotClef">On Error GoTo </span>Last' + '<br/>'
              + '&nbsp;' + '<span class="MotClef">' + 'For</span> i = 1 <span class="MotClef">To</span> ' + Valeur3Macro1 + '<br/>' 
              + '&nbsp;' + '&nbsp;' + 'Selection.Insert Shift:=xlToRight, CopyOrigin:=xlFormatFromRightorAbove</span>' + '<br/>' 
              + '&nbsp;' + '<span class="MotClef">Next</span> i' + '<br/>'
              + 'Last: <span class="MotClef">Exit Sub</span>' + '<br/>'
              + '<span class="MotClef">End Sub</span></div>';
              swal("Tadaaamm", "Votre macro est prête !", "success");
          }
          else{
              swal("Oooups", "Vous avez oublié de saisir une ou plusieurs valeurs", "error");
          };
        }
 
        function copier() {
          swal("Copié", " ", "success",{
          buttons: false,
          timer: 1000,
          });
        }
 
      </script>
 
  </body>
</html>

Merci bcp par avance du temps que vous accorderez à mon projet. :D

bien cdlt :)

17/10/2021, 17h21
Beginner.

Salut,

Citation:

Envoyé par louisrgn

J'ai essayé les méthodes document.execCommand("copy") et clipboard rien n'y fait

Montre-nous comment tu as fait pour qu'on puisse éventuellement voir ce qui ne va pas...

As-tu sélectionné le texte avant de lancer la fonction document.execCommand('copy') ?

Quand tu dis "Copier <p> dans le presse papier", veux-tu parler uniquement du texte ou bien du code html ?

Citation:

Envoyé par Beginner.

Salut,

Montre-nous comment tu as fait pour qu'on puisse éventuellement voir ce qui ne va pas...

Par exemple selon cet exemple : http://developer.mozilla.org/fr/docs..._the_clipboard

Code HTML :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <main> <section id="content"> <h3>Insérer des colonnes</h3> <p>Ce code vous permet de saisir plusieurs colonnes en un seul clic.<br> Vous devez simplement renseigné la colonne à partir de laquelle vous souhaitez ajouter d'autres colonnes et indiquer le nombre.</p> <label>Ciblez la colonne de départ</label><input type="text" placeholder="A" id="InputVal1macro1"><br> <label>Saisissez le nombre de colonnes à insérer</label><input type="text" placeholder="6" id="InputVal2macro1"><br> <p class="actions"> <button onclick="InstertionColonnesMultiples()" class="button special">Créer</button> <button id="copy" class="button special icon fa-copy">Copier</button></p> <p id="show_code_macro1" type="text"></p> </section> </main>
Code JS :
Code:

1 2 3 4 5 6 7 function copy() { var copyText = document.querySelector("#show_code_macro1"); copyText.select(); document.execCommand("copy"); } document.querySelector("#copy").addEventListener("click", copy);
Citation:

Envoyé par Beginner.

Quand tu dis "Copier <p> dans le presse papier", veux-tu parler uniquement du texte ou bien du code html ?

Je souhaite récupérer ce qui est affiché via la balise

Code:

<p id="show_code_macro1" type="text"></p>

Texte affiché et à copier :

Sub InsertMultipleColumns()
Dim i As Integer
Range("A:A").Select
On Error GoTo Last
For i = 1 To 6
Selection.Insert Shift:=xlToRight, CopyOrigin:=xlFormatFromRightorAbove
Next i
Last: Exit Sub
End Sub

Voici ta fonction "copier" :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function copier() {
            let p = document.getElementById("show_code_macro1")
            let sel = window.getSelection();
            let rangeObj = document.createRange();
            rangeObj.selectNodeContents(p);          
            sel.removeAllRanges()
            sel.addRange(rangeObj);            
            document.execCommand('copy')
 
 
            swal("Copié", " ", "success", {
                buttons: false,
                timer: 1000,
            });
        }

Sur chrome l'instruction sel.removeAllRanges() est nécessaire...

Teste et dis-nous si c'est bon...

17/10/2021, 18h28
louisrgn

Beginner!!!!!!! 8O

Tu es génial. C'est parfait, vraiment parfait.

Ça marche exactement comme je l'attendais :D

merci mille fois

Ah bah tant mieux si ça marche...

PS : Puisque tu ne récupères que le texte alors les class (exp: class="Pre") et certaines balises (<span>) ne sont pas utiles à moins que tu ajoutes du CSS pour présenter le texte d'une certaine manière...

Code:

1
2
3
4
5
6
7
8
9
10
document.getElementById("show_code_macro1").innerHTML =
                    '<div class="Pre"><span class="MotClef">Sub </span>' + 'InsertMultipleColumns()' + '<br/>'
                    + '<span class="MotClef">Dim </span>i <span class="MotClef">As Integer</span>' + '<br/>'
                    + 'Range("' + Valeur1Macro1 + ':' + Valeur2Macro1 + '").Select' + '<br/>'
                    + '<span class="MotClef">On Error GoTo </span>Last' + '<br/>'
                    + '&nbsp;' + '<span class="MotClef">' + 'For</span> i = 1 <span class="MotClef">To</span> ' + Valeur3Macro1 + '<br/>'
                    + '&nbsp;' + '&nbsp;' + 'Selection.Insert Shift:=xlToRight, CopyOrigin:=xlFormatFromRightorAbove</span>' + '<br/>'
                    + '&nbsp;' + '<span class="MotClef">Next</span> i' + '<br/>'
                    + 'Last: <span class="MotClef">Exit Sub</span>' + '<br/>'
                    + '<span class="MotClef">End Sub</span></div>';

17/10/2021, 20h40
louisrgn

1 pièce(s) jointe(s)

Citation:

Envoyé par Beginner.

Ah bah tant mieux si ça marche...

PS : Puisque tu ne récupères que le texte alors les class (exp: class="Pre") et certaines balises (<span>) ne sont pas utiles à moins que tu ajoutes du CSS pour présenter le texte d'une certaine manière...

J'ai un .CSS pour colorier mon code VBA. Comme ci-dessous :

Pièce jointe 606803

Par contre, une fois que j'ai cliqué sur "COPIER", la sélection est en bleue. est-il possible que ça ne soit pas le cas ? :roll:

Citation:

Envoyé par louisrgn

J'ai un .CSS pour colorier mon code VBA. Comme ci-dessous :

Ok. En utilisant la balise <pre> les espaces et saut de lignes sont conservés (plus besoin par exemple de balises <br/>...) mais bon c'est un détail...

Citation:

Envoyé par louisrgn

Par contre, une fois que j'ai cliqué sur "COPIER", la sélection est en bleue. est-il possible que ça ne soit pas le cas ? :roll:

Oui, petite modif :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 function copier() { let p = document.getElementById("show_code_macro1") let sel = window.getSelection(); let rangeObj = document.createRange(); rangeObj.selectNodeContents(p); sel.removeAllRanges() sel.addRange(rangeObj); document.execCommand('copy') sel.removeAllRanges() swal("Copié", " ", "success", { buttons: false, timer: 1000, }); }

18/10/2021, 09h12
louisrgn

Je viens de tester, c'est parfait :D
encore merci. je vais pouvoir continuer mon projet