Discussion :

[Beginner.]

Salut,

Je m'intéresse au copier/couper/coller dans une page html et je ne pensais pas que c'était aussi compliqué...

C'est apparemment à cause d'une question de sécurité que ce n'est pas si simple...

Il semble que Ctrl+C, Ctrl+V et Ctrl+X fonctionne bien mais apparemment on ne peut pas déclencher ces actions à partir d'autres choses comme avec la souris (menu contextuel personnel et non celui du navigateur) ???

Je ne suis pas le seul à mettre poser la question apparemment : Javascript: How to make a custom context menu with copy/paste options. Apparemment ils n'ont pas trouvé de réponses...

Les choses ont-elles évoluées ?
Merci.

[patricktoulon]

re
pour le menu c'est simple soit un ul li soit une balise menu "menu" en bloquant le menu originale de l'explorateur
pour le reste
une variable globale balise span ou celle sque tu veux

pour le couper extract content sur selection et appendchild dans un createelement("SPAN")
pour ne pas modifier le code original de la selection comme extract content ferme les balise (autocompletion)tu recupere le innerhtml du span dans un contextualfragment pour les explorer compatible ou creation de textnode

pour le copier
pareil sauf que c'est clonnecontent sur range

pour le coller
si selection vide createrange sur selection collate=true puis insertnode frament ou textnode

de cette maniere tu a acces a tout moment behind and after evenement
je t'avais repondu dans mon autre post

je pourrais meme dire que pour le couper/copier on pourrais utiliser seulement clonnecontent en deletant le range pour couper de facon a ne pas etre obligé de jouer avec le innerhtml de la selection encapsulé dans dans le span ,le texte resterait integre et s'autocompleterait l'ors de l'insertion IE le fait je suppose que les autres explorateurs le font aussi

[Beginner.]

Oui j'ai vu ta réponse ici : #21 et j'ai répondu :

Merci.

Oui apparemment IE fait mieux que les autres pour une fois...

Sur FF et Chrome, la fonction execCommand() fonctionne pour le copier mais pas pour le coller...

Et oui le menu contextuel natif le propose mais justement je pensais à faire mon propre menu et là ce n'est pas aussi simple que ce que je pensais...

J'ai ouvert le fil...

[Beginner.]

re
pour le menu c'est simple soit un ul li soit une balise menu "menu" en bloquant le menu originale de l'explorateur

Oui justement je pensais à ça mais par exemple ici : Custom Context Menu with Javascript? ils disent que c'est impossible et quelques temps plus tard ici : Javascript: How to make a custom context menu with copy/paste options il n'y a toujours pas de réponses...

[patricktoulon]

re
ben si c'est simple
je faisait comme ca avant de me servir de execCommand

execCommand donne l'avantage de raccourcir le code et le simplifier pour les explorers compatible bien sur
tu bloque le menu contextuel d'origine
tu repere le x et y
tu créé ton menu (UL/LI) attention il faut le attribut "unselectable" sinon la selection change pour le LI ou alors comme je l'avais fait mettre des boutons dans les LI
et selon l'option extract/clone>content
etc...

je sais pas si je l'ai toujours ce WysiWig a l'epoque c'etait le debut de IE 09 je regarderais dans mes archives il melangeais le vbs et le JS

[Beginner.]

Ah oui je comprends mieux, en fait effectivement ça doit être possible si ça reste dans ton éditeur, dans ce cas tu peux tout gérer toi même, on aura notre propre presse papier...

Mais en faisant cela tu n'utilises plus le presse papier justement et donc tu ne pourras pas coller du texte que tu as copié ailleurs que dans ton éditeur...

Ou je me trompe ?



PS : ---> Mais bon c'est déjà quelque chose à faire (c'est mieux que rien) et pour le reste il y a toujours les raccourcis clavier...

[patricktoulon]

ben alors ??????
quand tu click sur ton submenu "coller" tu interroge le presse papier et t si il y a quelque chose tu le recupere dans le span et tu n'oublie pas de le vider apres sinon il repond toujours oui
meme si tu change d'avis et ne colle pas il est pas perdu puisque qu'il est dans le span


ou tout simplement if (selectedtext()===""){ code pour récupérer pressepaier;}

et insertion

voir meme hoh!! que je suis bete !!!
si le span est vide ou null selon ta methode de déamorcage que tu aura choisi paster avec la fonction originale tout simplement document.execWeb( arguments,arguments) si c'est compatible avec ton navigateur sinon utiliser la fonction similaire propre a ton navigateur voir mettre toute les methodes dans un if else et un catch(e)

[Beginner.]

Ben oui mais comment fais-tu pour interroger le presse papier et récupérer son contenu ?

Sachant que sur FF et Chrome, la fonction execCommand() fonctionne pour le copier et même le couper mais pas pour le coller...

[patricktoulon]

comme je te l'ai dis en dernier au grand beta que je suis tu n'interroge meme pas le presse papier la balise font("memo")dirige tout

je t'ai fait un exemple a ameliorer bien sur
il ne te reste plus qu'a créé ton menu et appeler les fonctions du menu je l'ai fait avec des bouton
je ne connais pas la methode paste original des autres navigateurs mais elle existe ca c'est sur!!

pour les autre navigateur il te faudra mettre les condition de compatibilité dans les 2 1eres fonction de selection
teste deja sur IE et regarde la console

copie ou coupe selectionne ailleurs et colle
selectionne rien en suite positionne toi ou tu veux et colle
le resultat et dans la console
voila mon raisonnement a ameliorer quand meme pour le cas ou tu selectionne au milieu d'une font en couleur la couleur n'est pas restituée
il faut tester le parentancestor si je ne me trompe pas et mettre l'attribut color a memo

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
<!DOCTYPE HTML >
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>patrick WYSIWYG html </title>
  <style> 
</style>
 
<script type="text/javascript">
var memo;
 function selection() {
  return window.getSelection();
 }
 function getrange() {
  var sel = selection();
  return sel.getRangeAt(0);
 }
 function couper() {
  console.log(" action !: couper");
  var sel = selection();
  var range = getrange();
  var selectionhtml = range.extractContents();
  memo = document.createElement("FONT");
  memo.appendChild(selectionhtml);
  sel.removeAllRanges();
  console.log(" en memoire =" + memo.outerHTML);
 }
 function copier() {
  console.log(" action !: copier");
  var sel = selection();
  var range = getrange();
  var selectionhtml = range.cloneContents();
  memo = document.createElement("FONT");
  memo.appendChild(selectionhtml);
  sel.removeAllRanges();
  console.log(" memoire " + memo.outerHTML);
 }
 function coller() {
  console.log("teste si memo est null");
  if (memo != null) {
   console.log("memo n'est pas null");
   var sel = selection();
   var range = getrange();
   // range.collapse(true);
   range.insertNode(memo)
   console.log("collage");
   memo = null
   console.log("memo n'est plus rien");
  } else {
   console.log("memo est null alors paster avec le paste original");
  }
 }
</script>
</head>
<body>
<button id=coup onclick="couper()"> couper</button>
<button id=cop onclick="copier()"> copier</button>
<button id=colle onclick="coller()">coller </button>
<div id="editeur" contenteditable="true" style="width:500px;height:300px;border:1px solid red;"  > 
<p>blablablablablabla<font color=red> blablablablabla</font><font color=green> blablablablabla</font></p>
</div>
</body>
</html>

[Beginner.]

Ah mais je vois que tu te débrouilles de mieux en mieux, tu vas laisser VB pour JS si ça continue...

Sinon oui j'ai testé, c'est un bon code très intéressant et c'est bien ça que j'avais compris, comme je disais : "...ça doit être possible si ça reste dans ton éditeur, dans ce cas tu peux tout gérer toi même, on aura notre propre presse papier..."... Toi ton propre presse papier tu l'as appelé "memo" dans ton code...

Nous sommes d'accord sur ce point mais comme je disais aussi : "Mais en faisant cela tu n'utilises plus le presse papier justement et donc tu ne pourras pas coller du texte que tu as copié ailleurs que dans ton éditeur..."

Si tu n'utilises pas le presse papier alors tu es limité à ton éditeur, tu ne peux pas coller un texte qui a été copié ailleurs.

Apparemment l’accès au presse papier est limité pour des questions de sécurité (c'est parfois gonflant quand même...), on peut quand même y écrire via un copier ou un couper avec la fonction execCommand() mais curieusement celle-ci ne fonctionne pas pour le coller alors on se demande pourquoi la commande "paste" existe...

[patricktoulon]

excuse moi j'ai du partir
sur mdn il est dit que tu peut utiliser execCommand a condition de demander la permission
Selon le navigateur, cela peut ne pas fonctionner. Sur Firefox, cela ne fonctionnera pas, et vous verrez le message suivant dans votre console:
"document.execCommand(‘cut’/‘copy’) was denied because it was not called from inside a short running user-generated event handler."Pour activer ce cas d'utilisation, vous devez demander la permission "clipboardWrite". Donc : "clipboardWrite" vous permet d'écrire dans le presse-papiers en dehors d'un gestionnaire d'événements de courte durée pour une action de l'utilisateur.

https://developer.mozilla.org/fr/Add...on/permissions

https://developer.mozilla.org/fr/Add...al_permissions

[danielhagnoul]

J'ai trouvé de la lecture, mais je n'ai pas testé. Je vois que :

• La permission de l'utilisateur est requise pour utiliser son clipboard !
• Tous les navigateurs ne réagissent pas de la même manière.
• C'est réservé aux navigateurs non obsolètes.

Lire :

• Interact with the clipboard
• permissions

[patricktoulon]

bonsoir daniel
c'est la meme page que toi qui m'a mené aux pages permissions mais en francais
https://developer.mozilla.org/fr/Add..._presse_papier

[danielhagnoul]

Nos réponses se sont croisées et j'ai donné les liens en anglais (je consulte souvent les pages en anglais car la traduction n'est pas toujours au point ni à jour).

[Beginner.]

Merci.

Mais ces liens concernent les WebExtensions apparemment mais il y a quand même des choses qui confirment mes tests : Pour le coller c'est plus stricte que pour le copier et le couper.

J'ai trouvé aussi des liens intéressants sur le sujet :

- The Definitive Guide to Copying and Pasting in JavaScript
- Accessing the System Clipboard with JavaScript – A Holy Grail?
- javascript cut/copy/paste to clipboard: how did Google solve it?

Mais je pense que certaines choses ne sont plus valables, cela a évolué, pour l'instant je constate que :

1---> Les racourcis clavier Ctrl+C, Ctrl+V et Ctrl+X fonctionnent bien.

2---> On peut aussi exécuter ces actions avec le menu contextuel natif du navigateur mais il y a des conditions comme par exemple le fait que l'élément doit être éditable, avoir le focus... Mais dans mes tests le copier/couper fonctionnait aussi avec un élément non éditable.

3---> A partir d'autres choses que ces deux moyens ci-dessus (bouton, menu personnel...) je n'ai pas réussi à faire du coller mais le copier/couper fonctionne avec la fonction execCommand().

Il semblerait que ce n'était pas toujours le cas, il y a ce lien : https://developers.google.com/web/up...-copy-commands qui confirme le copier/couper avec la fonction execCommand() mais rien à propos du coller...

Voilà pour l'instant...

[patricktoulon]

bonsoir beginner

pour choper le texte copier ailleurs que dans l'explorer on fait exactement pareil qu'en VBA VB VBS pour IE
A SAVOIR

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var clipText = window.clipboardData.getData('Text');

ce qui fait que ma fonction coller de mon exemple plus haut devient

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function coller() {
 console.log("teste si memo est null");
 if (memo != null) {
  console.log("memo n'est pas null");
  var sel = selection();
  var range = getrange();
  // range.collapse(true);
  range.insertNode(memo);
  console.log("collage");
  memo = null
  console.log("memo n'est plus rien");
 } else {
  var clipText = window.clipboardData.getData('Text');
  memo = document.createElement("FONT");
  memo.innerHTML = clipText;
  var sel = selection();
  var range = getrange();
  // range.collapse(true);
  range.insertNode(memo);
  console.log("memo est null alors paster avec le paste original");
  console.log(" voila ce qui a été collé");
  console.log(clipText);
}
}

en gros je met le contenu de clipboard dans memo et j'insert

ca fonctionne nikel avec IE

[Beginner.]

Salut,

pour choper le texte copier ailleurs que dans l'explorer on fait exactement pareil qu'en VBA VB VBS pour IE
A SAVOIR var clipText = window.clipboardData.getData('Text');

Oui tout à fait, on n'a pas accès au clipboardData via l'objet window sur les autres navigateurs, cette fois c'est IE qui nous facilite les choses.

[danielhagnoul]

Bientôt du copier/coller sans peine ? Arrivée sur Chrome 66 de Async Clipboard API, mais il faudra encore attendre son arrivée sur Firefox et Edge avant de le mettre en oeuvre.

[Beginner.]

Merci pour l'info.