Afficher le code html correspondant à la sélection de texte

Version imprimable

Voir 40 message(s) de cette discussion en une page

bonsoir a tous
je voudrais savoir si c'est possible de voir dans un message le code html correspondant a la section de texte
j'ai trouvé plein de petite choses mais je n'arrive rien ,le seul qui me donne un résultat c'est le premier mais il me donne tout le contenu et non juste la sélection
Code:

1 2 3 4 5 6 7 8 function voir(){ var mySelection = window.getSelection().getRangeAt(0).commonAncestorContainer ;// donne le div tout entier //var mySelection = window.getSelection().getRangeAt(0).anchorNode ;// marche pas //var mySelection = window.getSelection().createRange().parentElement() ;//marche pas //var mySelection =window.getSelection().anchorNode;/////undefined var mySelection=window.selection.createRange()).htmlText;//marche pas alert(mySelection.outerHTML); }

06/03/2017, 14h39
Beginner.

Moi aussi j'ai voulu étudier ce genre de chose notamment pour faire ce dont on a parlé dans l'autre fil (sur la suppression d'un formatage spécifique...)...

Sur l'autre fil tu utilises des fonctions qui ne sont pas loin de te donner la réponse à ta question...

Voici un exemple que tu peux tester ici : http://jsbin.com/baxigafumi/edit?js,output

Regarde la fonction getHtmlOfSelection()...

bonjour beguinner

je vais aller voir mais j'ai trouver comment récupérer le code html de la sélection sans faire un newbalise appendchil (selection)

en fait je le fait mais avec un clone

Code:

1
2
3
4
5
 var mySelectionhtml  =window.getSelection().getRangeAt(0).cloneContents(); var newNode  = document.createElement("SPAN");
 //newNode.style.textShadow = '0px 0px 10px '+coul;
 newNode.appendChild(mySelectionhtml);
 
alert(newNode.innerHTML);

et voila comme ca de cette façon ca n'extrait pas la sélection quand je appendchild
je vais quand meme aller voir
en tout ca le fait ne ne pas extraire la selction et de delete apres toute la range ca ne me petarde plaus les doublons avant la newbalise
voila un brouillon je suis parti sur l'idée de badaze maisen html a l’intérieur
j'ai fait ca apart dans un new fichier pour ne travailler que sur satané fonction shadow

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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
html><head>
  <meta http-equiv="X-UA-Compatible" content="IE=10">
<style type="text/css">
<!--
.editor    {font-family:tahoma}
.actionbar {background-color:#c0c0c0;border:1px solid black}
.comment   {border:2px dotted red}
-->
</style>
<script>
function Shadowcolor(coul,MOD) {
 var mySelection  = window.getSelection();
 var mySelectionhtml  =window.getSelection().getRangeAt(0).cloneContents(); 
var newNode  = document.createElement("SPAN");
 //newNode.style.textShadow = '0px 0px 10px '+coul;
 newNode.appendChild(mySelectionhtml);
var str=newNode.innerHTML;
var f=newNode.getElementsByTagName("SPAN");
 
 
if(f.length>0){
 
 
for(var i=0;i<f.length;i++){
console.log(f[i].style.textShadow);
str=str.replace(f[i].outerHTML,f[i].innerHTML);
}
}
newNode.innerHTML=str;
 
 
var xxxx                 = mySelection.getRangeAt(0);
   xxxx.deleteContents();
    xxxx.insertNode(newNode);   
 
  if(newNode.parentElement.tagName!="P"){
   p=newNode;
    do{p=p.parentElement;}while(p.tagName!="P");
   }
   var nb=p.getElementsByTagName("*").length;
     var sp=p.getElementsByTagName("*");
for(var e=0;e<nb*2;e++){
   for (var i=sp.length;i>=0;i--){
      if(sp.innerHTML==""){sp.parentElement.removeChild(sp);}
      }     
 }
 
 
if (MOD==true){ newNode.style.textShadow = '0px 0px 10px '+coul;}
if (MOD==false){ 
 
 
 
 
 
 
if(newNode.parentElement.tagName=="SPAN"){newNode.style.textShadow = "none";}
//if(newNode.parentElement==p.Chidren[0] && p.firstChild.tagName="FONT" && MOD==false){p.innerHTML=p.innerHTML.replace(newNode.outerHTML,newNode.innerHTML);}
}
p.innerHTML=p.innerHTML.replace(/<\/strong><strong>/gi,"");
p.innerHTML=p.innerHTML.replace(/<\/em><em>/gi,"");
 
 
alert(p.outerHTML);
 
 
 document.getElementById('comment').focus();
}
 
 
 
 
 
 
 
 
 
 
function voir(){
var mySelectionhtml  =window.getSelection().getRangeAt(0).cloneContents(); 
var newnode=document.createElement("FONT")
newnode.appendChild(mySelection)
alert(newnode.mySelectionhtml);
}
 
 
</script>
</head>
<body>
    <div id="comment" class="comment" contenteditable>
 
 
 
 <p><font size=5>teste de <strong>te<font color=red><em>xt</em>e</font></strong> shadow</font></p>
 
 
 
 
 
 
 </div>
    <br />
 <input type="button" id="shadow" value="shadowblack" onclick="Shadowcolor('black',true)"/> 
 <input type="button" id="shadow2" value="shadowred" onclick="Shadowcolor('red',true)"/> 
<input type="button" id="shadow2" value="shadowblue" onclick="Shadowcolor('blue',true)"/> 
<input type="button" id="shadow2" value="shadowmagenta" onclick="Shadowcolor('magenta',true)"/> 
<input type="button" id="shadow3" value="retir" onclick="Shadowcolor('rien',false)"/> 
<input type="button" id="shadow3" value="voir interieur" onclick="voir('')"/> 
<input type="button" id="html" value="HTML" onclick="alert(document.getElementById('comment').innerHTML)"/>
</body>
</html>

06/03/2017, 14h55
Beginner.

Citation:

Envoyé par patricktoulon

et voila comme ca de cette façon ca n'extrait pas la sélection quand je appendchild

Oui c'est aussi ce que j'ai fait, j'ai même mis un commentaire...
06/03/2017, 15h09
patricktoulon

re

re
oui bon ben on fait pareil en fait
06/03/2017, 15h18
Beginner.

Oui mais au moment où je t'ai répondu je ne savais pas qu'entre temps tu avais trouvé une réponse donc j'ai posté ma réponse...
06/03/2017, 15h21
patricktoulon

re

re
c'est pas grave tu m'aide beaucoup
et j'ai une autre idéee aussi mais c'est une entourloupette a la patricktoulon
je peut le faire avec execCommand qui fait tout le boulot tu te demande bien comment on peut faire surtout que execcommand(shadowcolor,x,y) n’existe pas hein ??!!!
06/03/2017, 15h34
Beginner.

Oui oui, ce serait intéressant, suspens...

C'est vrai que cette fonction fait un travail optimisé, elle fait le ménage, n'ajoute pas de balises inutiles...

J'ai pensé à un moment à l'utiliser pour faire des repérages, on l'utilise avec un formatage très particulier de façon à ce qu'il soit très peu probable d'être utilisé par l'utilisateur et alors on repère toutes ces balises et on y met ce qu'on veut... Mais cela ne résout pas tout le problème...
06/03/2017, 15h43
patricktoulon

re

c'est axactement ce que je vois
en fait je me servirais de "backcolor"
apres selection il faudrais que je sache lire le html ou meme savoir simplement le style de chaque range je dis bien range

si c'est shadow on met la couleur du shadow en backcolor et comme quand on change ou supprime le backcolor ca fait tout le boulot je fait un execcomand backcolor

repérer cette nouvelle font créée par backcolor et remplace le style backcolor par le style shadow de la même couleur
je pense que c'est jouable
mémé si après je veux pousser le nettoyage plus loin rien ne m'en empêche mais tout les problèmes de sections jumelles et de doublons et de balises vides n'y seront pas
après peut être que l’opération créera un espèce de scintillement (couleur/pas couleur ) je sais pas mais c'est a essayer

voila mon idée en gros
t'en pense quoi ?
06/03/2017, 16h10
Beginner.

C'est à tester, il faut voir si execCommand gère le formatage contenu dans les balises , il m'avait semblé que oui mais comme cela fait un bon moment que j'avais regardé je n'en suis pas sûr à 100%...
06/03/2017, 16h19
patricktoulon

re

au pire je repaer en font puisque je n'ai plus le soucis d’identification avec execcommand

coment on fait pour lire ou savoir le style de chaque range ????
06/03/2017, 16h32
Beginner.

Citation:

Envoyé par patricktoulon

apres selection il faudrais que je sache lire le html ou meme savoir simplement le style de chaque range je dis bien range

Oui range, entre temps je réfléchissais à une idée proche de la tienne dans laquelle il faut aussi passer par cette étape j'ai donc déjà commencé à y réfléchir et pour l'instant j'ai vu qu'il y a plusieurs situations à envisager...

Oui car il ne faut pas oublier qu'une sélection a deux extrémités, alors il y a ces cas par exemple :

1- Pas de croisement : toutes les balises shadow sont à l'intérieur de la sélection, là je pense que c'est facile on les supprime toutes (comme on sait déjà le faire) puis on applique sur le résultat le nouveau shadow.

Pour ce cas pas besoin je pense de la fonction execCommand...

2- Ensuite il y a le cas ou toute la sélection (les deux extrémités donc) est à l'intérieur d'une balise shadow...

3- Ensuite il y a les autres cas, ou par exemple un shadow est appliqué à seulement une des deux extrémités ou bien le cas où chaque extrémité à un shadow différent...
06/03/2017, 16h39
patricktoulon

re

re
a oui bien vu
je n'avais pas en tété le cas ou la sélection prendrait q'une partie d'une chaîne en shadow ce qui serait le cas le plus compliqué a savoir restituer le shadow a la partie exterieur du new faux back
06/03/2017, 16h43
Beginner.

Citation:

Envoyé par patricktoulon

coment on fait pour lire ou savoir le style de chaque range ????

J'ai posté mon message précédent avant de lire cette question, j'ai un peu commencé à y répondre, il faut je pense commencé par lister les différents cas possibles...

Par exemple pour le cas 1, c'est facile, tu l'as déjà fait dans la partie "surpression", oui car pour supprimer tu cherches bien toutes les balises pour ensuite les supprimer...

Pour les autres cas il faudra regarder si les parents de chaque extrémité de la sélection ont ou non un shadow... Et savoir si un parent a un shadow c'est aussi quelque chose que tu as déjà fait...

Une fois cela fait, c'est possible que dans tous les cas il n'y ait pas besoin d'utiliser la fonction execCommand, c'est sur cette piste que je suis d'ailleurs...
06/03/2017, 16h51
Beginner.

Citation:

Envoyé par patricktoulon

re
a oui bien vu
je n'avais pas en tété le cas ou la sélection prendrait q'une partie d'une chaîne en shadow ce qui serait le cas le plus compliqué a savoir restituer le shadow a la partie exterieur du new faux back

Oui c'est ça il faudra restituer le shadow aux parties extérieures, au pluriel car il peut y en avoir deux, l'une à gauche et l'autre à droite de la sélection...
06/03/2017, 18h20
patricktoulon

re

oui
sans passer par la méthode execcommand le replace de tout les span intérieur et contrôle du parent span ou pas voir plus exactement parent grandpere arriere grandpere etc.... car ca peut etre un subsubsubsub enfant mais ca c'est bon ca match

le probleme la ou sa se complique c'est que il fait pas le menage du genre

Code:

truc machin bidule 

le code n'est pas faux mais inutile tu en conviendra

c' est la resultante du replace automatique du dom quand j'ai sélectionné la moitié d'une balise lors d'une première ou x eme fois avant la dernière sélection donc après pour netoyer ca je te dis pas
si non le résultat visuel est bon et surtout je n'ai plus le wagon de fantômes devant
06/03/2017, 18h25
patricktoulon

re

je pense qu'avec la methode execommand on peut repérer dans le codeHtml les nodetype 3 (le texte qui n'a pas de balise) et le comparer avec le code de depart
soustraire la chaine et on a le reste du texte d'avant pour devant et derrière non??

c'est une idée je n'ai aucune idée du comment faire c'est simplement un raisonnement
06/03/2017, 19h53
patricktoulon

re

avec l'exemple élaboré sur l'idée de badaze je renctre un soucis mineur dans le netoyage
comment fait on pour faire ceci:
j'ai l'impression que le " " ne fonctionne pas
je veux supprimer tout les elements qui ont pour innerhtml un espace

Code:

if(sp.innerHTML==" "){sp.parentElement.removeChild(sp);}
06/03/2017, 20h25
Beginner.

Citation:

Envoyé par patricktoulon

oui
sans passer par la méthode execcommand le replace de tout les span intérieur et contrôle du parent span ou pas voir plus exactement parent grandpere arriere grandpere etc.... car ca peut etre un subsubsubsub enfant mais ca c'est bon ca match

le probleme la ou sa se complique c'est que il fait pas le menage du genre

Code:

truc machin bidule 

le code n'est pas faux mais inutile tu en conviendra

c' est la resultante du replace automatique du dom quand j'ai sélectionné la moitié d'une balise lors d'une première ou x eme fois avant la dernière sélection donc après pour netoyer ca je te dis pas
si non le résultat visuel est bon et surtout je n'ai plus le wagon de fantômes devant

Oui on a trois fois plus de balises ce qui est dommage...

Le "replace automatique" c'est avec le inserNode(), c'est ça que tu veux dire ?

Citation:

Envoyé par patricktoulon

je pense qu'avec la methode execommand on peut repérer dans le codeHtml les nodetype 3 (le texte qui n'a pas de balise) et le comparer avec le code de depart
soustraire la chaine et on a le reste du texte d'avant pour devant et derrière non??

c'est une idée je n'ai aucune idée du comment faire c'est simplement un raisonnement

Si tu veux parler de la partie à gauche ou à droite de la sélection entière ou bien de la partie à gauche ou à droite d'une des deux extrémités de la sélection eh bien on peut les sélectionner automatiquement avec les ranges...

En fait tu peux fixer un range de sorte qu'il corresponde à la partie du texte que tu veux...

Si par exemple tu as :

Code:

ceci est [un exemple] pour voir...

dont le rendu visuel est : ceci est [un exemple] pour voir...

Si ensuite l'utilisateur sélectionne la partie entre crochets : [un exemple] tu peux avoir un range correspondant à cette partie sélectionnée, ça tu le sais déjà mais tu peux aussi obtenir un range correspondant au texte à gauche : "ceci est" ou à droite " pour voir...".

Et une fois que tu as un range tu peux lui appliquer les styles que tu veux...

Tu peux même utiliser la fonction execCommand pour mettre par exemple la partie "ceci est" en italique...

et oui c'est cela dont je n'ai aucune idée de comment faire j'ai glané ici et la quelques informations sur startcontainer et end mais bien trop flou encore pour moi

pour le moment avec cet méthode qui suit comme tel j'ai le résultat souhaité
je peut mettre un shadow /changer le shadow entièrement ou une partie /supprimer entièrement ou une partie n'importe ou

le seul souci c'est que ma boucle qui est sensé faire le nettoyage des balise vides ne fait son boulot

et la derniere qui est sensé me remplacer le outerhtml par le innerhtml de newNode en cas de shadow false et le newNode enfant de p ou font sans passer par un span
ne fonctionne pas

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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
 
<html>
 
 
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=10">
    <style type="text/css">
<!-- .editor {
    font-family: tahoma
}
 
 
.actionbar {
    background-color: #c0c0c0;
    border: 1px solid black
}
 
 
.comment {
    border: 2px dotted red
}
 
 
-->
    </style>
    <script>
function Shadowcolor(coul, MOD) {
    var mySelection = window.getSelection();
    var mySelectionhtml = window.getSelection().getRangeAt(0).cloneContents();
    var newNode = document.createElement("SPAN");
    newNode.appendChild(mySelectionhtml);
    var str = newNode.innerHTML;
    var f = newNode.getElementsByTagName("SPAN");
 
 
    //on supprime tout les shadow interne
    if (f.length > 0) {
        for (var i = 0; i < f.length; i++) {
            str = str.replace(f[i].outerHTML, f[i].innerHTML);
        }
    }
    newNode.innerHTML = str;
 
 
    var xxxx = mySelection.getRangeAt(0);
    xxxx.deleteContents();
    xxxx.insertNode(newNode);
    //pour la suite il nous faut identifier la balise "p" qui contient la newNode    
 
 
    if (newNode.parentElement.tagName != "P") {
        var p = newNode;
        do {
            p = p.parentElement;
        } while (p.tagName != "P");
    }
 
 
    // on va netoyer les balises vides
    var nb = p.getElementsByTagName("*").length;
    var sp = p.getElementsByTagName("*");
    //for(var e=0;e<nb*2;e++){
    for (var i = sp.length; i >= 0; i--) {
        if (sp.innerHTML == "") {
            sp.parentElement.removeChild(sp);
        }
        if (sp.innerHTML == "\ ") {
            sp.parentElement.removeChild(sp);
        }
    }
    // }
    alert(p.outerHTML);
    // si l'apel est true alors on met la couleur shadow
    if (MOD == true) {
        newNode.style.textShadow = '0px 0px 10px ' + coul;
    }
 
 
    if (MOD == false) {
        var ok = "yes"
        var p = newNode;
        do {
            p = p.parentElement;
            if (p.tagName == "SPAN" && p.style.textShadow != "") {
                ok = "no";
                newNode.style.textShadow = "none";
            }
        } while (p.tagName != "P");
    }
    //if(ok!="no"){p.innerHTML=p.innerHTML.replace(newNode.outerHTML,newNode.innerHTML;}
    p.innerHTML = p.innerHTML.replace(/<\/strong><strong>/gi, "");
    p.innerHTML = p.innerHTML.replace(/<\/em><em>/gi, "");
 
 
    alert(p.outerHTML);
 
 
    document.getElementById('comment').focus();
}
 
 
 
 
 
 
 
 
function voir() {
    var mySelectionhtml = window.getSelection().getRangeAt(0).cloneContents();
    var newnode = document.createElement("FONT")
    newnode.appendChild(mySelection)
    alert(newnode.mySelectionhtml);
}
 
 
function voir2() {
    var range = window.getSelection().getRangeAt;
    alert(range(0).htmlText);
}
 
 
function backcol(coul, MOD) {
    document.execCommand("backcolor", true, coul)
}
    </script>
</head>
 
 
<body>
    <div id="comment" class="comment" contenteditable>
 
 
 
 
        <p>
            <font size=5>teste de <strong>te<font color=red><em>xt</em>e</font></strong> shadow</font>
        </p>
 
 
 
 
 
 
    </div>
    <br />
    <input type="button" id="shadow" value="shadowblack" onclick="Shadowcolor('black',true)" />
    <input type="button" id="shadow2" value="shadowred" onclick="Shadowcolor('red',true)" />
    <input type="button" id="shadow2" value="shadowblue" onclick="Shadowcolor('blue',true)" />
    <input type="button" id="shadow2" value="shadowmagenta" onclick="Shadowcolor('magenta',true)" />
    <input type="button" id="shadow3" value="retir" onclick="Shadowcolor('rien',false)" />
    <input type="button" id="shadow3" value="voir interieur" onclick="voir('')" />
    <input type="button" id="shadow3" value="voirrange" onclick="voir2('')" />
    <input type="button" id="html" value="HTML" onclick="alert(document.getElementById('comment').innerHTML)" />
 
 
    </BR>
    <input type="button" id="BACKRED" value="backred" onclick="backcol('blue',true)" />
</body>
 
 
</html>

Voir 40 message(s) de cette discussion en une page