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

Version imprimable

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>

06/03/2017, 21h57
patricktoulon

re

re

Citation:

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...

a oui!!! tu peux me faire un exemple
parce que si on peu modifier le contenu d'un range dans les ranges ca change tout
jusque qu'a présent je n'ai pas réussi a lister les ranges dans une sélection
07/03/2017, 00h28
Beginner.

Citation:

Envoyé par patricktoulon

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

Oui c'est vrai, cela m'avait pris du temps à comprendre...

Citation:

Envoyé par patricktoulon

a oui!!! tu peux me faire un exemple

Essai ça : http://jsbin.com/hecoyokece/1/edit?js,output
07/03/2017, 16h47
patricktoulon

re
Bonjourt beguinner
oui c'est plus clair mais il manque la distinction de l'apartenance de la gauche interne a la gauche externe

après je pense que l'on fait fausse route
puisque le backcolor reconstruit la balise en amont et en aval
autant se servir de pevius et nextsibling

toute les balise selectionnées bacckolor puis remplacement bak par shadow puis execommand avec new couleur puis previus remplacement back par shadow puis pareil pour le nextsibling puisque les balise de droite et de gauche a l’extérieur sont reconstruite avec le string restant automatiquement pas le dom avec execcommand
donc ce qu'il faut pour faire les choses bien c'est vraiment discerner LES ranges dans la selection et non faire un getrangeat(0)mait un getrangeAT puis boucles sur tout les fragments et remplacer le shadow par back puis execcomand le nettoyage se fera tout seul
comme les balise a gauche et a droite seront refaite automatiquement

donc en gros c'est
1. sélection
2. récuperer avec la sélection la balise donc le texte a été tronqué a gauche puis a droite et uniquement la balise pas tout le reste
3. donc creation d'un nouveau range ou add range
4. autrement dit il faut faire une range intermediaire
5. remplacer shadow par back
6. execcomand backcolor sur la selection premiere
7. remplacement du nouveau back par shadow même couleur sur la selection 1
8. remplacement du back previussibling par shadow même couleur
9. remplacement back par shadow même couleur pour le nextsibling
10. ou directement travailler sur la selection 2
11. et voila c'est execcomand qui fait tout le boulot
voila mon raisonnement

re
tiens essaie cela c'est un brouillon
ca m'a permis aussi de voir et confirmer ce que je pensait a savoir les reste de texte sélectionne extérieur sont bien reconstruite par le dom il n'y a donc pas a s'en occuper
et finalement on pourrait meme non pas styler le range mais simplement le remplacer la le newNode re travaillé
bon ca deraille mais l'idée est la

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
<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 backcol(coul,MOD){
var range  =window.getSelection().getRangeAt(0);
var mySelectionhtml  =window.getSelection().getRangeAt(0).cloneContents(); 
var newNode  = document.createElement("FONT");newNode.id="reverse"
newNode.appendChild(mySelectionhtml);
var f=newNode.getElementsByTagName("FONT")
for(var i=0;i<f.length;i++){
if(f[i].style.textShadow!=null && f[i].style.textShadow!=""){
couleur=f[i].style.textShadow.replace("0px 0px 10px ","");
f[i].style.textShadow="";
f[i].style.backgroundColor=couleur
}
}
   range.deleteContents();
    range.insertNode(newNode);   
 range.deleteContents();
    range.insertNode(newNode);   
 
 
 
 
document.execCommand("backcolor",true,coul);
 
 
document.getElementById("reverse").style.textShadow="0px 0px 10px " + coul;
document.execCommand("backcolor",false,null);
document.getElementById("reverse").removeAttribute("id");
document.getElementById('res').value=newNode.outerHTML;
 
 
 
 
}
</script>
</head>
<body>
    <div id="comment" class="comment" contenteditable>
 
 
 
<p><font size="5">teste de <font style="text-shadow: 0px 0px 10px red;"><strong>te</strong></font><font style="text-shadow: 0px 0px 10px blue;"><strong><font color="red"><em>xt</em>e</font></strong></font><strong><font color="red"></font></strong> shadow</font></p>
 
 
 
 
 </div>
 
<input type="button"value="backblue" onclick="backcol('blue',true)"/> 
<input type="button"  value="backgreen" onclick="backcol('green',true)"/> 
<input type="button" value="backRED" onclick="backcol('red',true)"/> 
<input type="button" value="backmagenta" onclick="backcol('magenta',true)"/> 
</br>
<textarea id="res"rows="10" cols="100">
</textarea> 
</body>
</html>

07/03/2017, 21h42
Beginner.

Ok je vais tester et essayer de comprendre...
07/03/2017, 21h56
patricktoulon

re

sinon j'ai trouvé
toutes ces petites expériences m'ont appris le comportement de ranges.deletecontents(); oh puré que c'est bien ca et que je suis con de ne pas l'avoir observé plus tot

dans le résultat html je t'aurais donné la solution en moins de deux
fait ta petite expérience tu va comprendre tout seul
il me faut identifier la balises restante et/ou modifiée a gauche et c'est réglé
puré je suis pas fier la:oops:
QU'EST CE QUE C'EST CON CE TRUC

je dirais même mieux c'est comme ca que je procédé en VB,VBA avec des outils différents mais le procédé en gros est identique
je suis un Abr...t

dire que ca fait 2 semaines que je emboucane avec ca
je n'ai aucunes excuses
07/03/2017, 22h28
Beginner.

Non mais ne soit trop dur avec toi même, c'est un problème assez difficile quand même...

Sinon j'ai mis ton code ici : http://jsbin.com/muwocibuva/edit?html,output
07/03/2017, 22h59
patricktoulon

rerde

a oui sur cette plate forme levremplacement ne se fait pas
de toute facon laisse tomber cette idéee
tout problème que l'on a rencontré dans tout les versions et idées que l'on a mis a exécution se résume a un seul
c'est qu'on cherche a faire le boulot a la place du DOM
ce qui nous a induit dans toutes ces directions c'est le fait que insertnodes créé des incompréhention le dom lui repare comme il peut voir vides les balises et les reproduit a la suite sainement c'est ce qui explique nos balises vides ,les doublons,et tout i cointi

tandis que!!!!!!!!!!!!!
si on sélectionne n' importe quoi n'importe ou
que l'on clonne le rangecontents
que l'on appenchild dans une new balise
et que l'on delete la sélection
et bien regarde le code html obtenu de prés après deletion
le DOM A DEJA TOUT FAIT A PARTIR DE CE MOMENT LA
il ne reste plus q'ua insérer la newbalise dans la quelle on a triturer ce qu'on a voulu juste après la balise qui contient le reste d'une balise qui a éré tronqué
si il n'y a pas de reste ca veut dire que dans la gauche interne de la sélection la balise était entière

donc!!!!!!!

si entière insertnode
sinon insertbefore

n'ayant pas les connaissance dans ce language suffisantes c'est sur le point de l'identification du restant que je seche
en vb je fait ca en string split sur (le texte selectionné)(1) et resplit sur"(0)
08/03/2017, 17h34
Beginner.

Oui j'ai fait plusieurs tests pour comprendre comment fonctionnent ces fonctions et en particulier je voulais savoir si lorsque qu'on insert une sélection éventuellement modifiée les balises qui avaient été coupées étaient reconstituées d'une manière optimisée sans multiplications inutiles et hélas ce n'est pas le cas et c'est pour cela que j'ai aussi abandonnée cela mais je n'avais pas penser au delete de la sélection il faut que je vois ça...
08/03/2017, 19h02
patricktoulon

re

Bonjour Beguinner
perso avant delete ja fait le start et end pour capter le reste a gauche que je clonne aussi et apendchild dans un autre bal provisoire
je fait un get element font pour trouver le dernier ca c'est bon j'ai

voila j'ai donc le code html de ma sélection
le code html de la balise qui a été tronquée ou non
voila suppresion du range(delete )
le code est netoyé
je triture le code de la selection dans le newnode

je recherche dans le p la dernière balise qui correspond au html que j'ai repérer pour le restant
si c'est undefined il y a rien sinon j'ai ma balise de gauche
insertbefore element restant de gauche .nextsibling

sinon insertnode

et bien tu sais quoi???
ca marche pas quand même
c'est d'une formidable débilité ce dom

je fait donc ce que j'ai dis
je selectionne ,clone,apendchild clonne dans newnode et je met de coté
je prends start et end et je determine la derniere font ca c'est ok je l'ai bien dans le alert
je delete le range et le rangeobjG qui m'a servi a trouver le gauche restant

j'ai dans le code html du parent un code propre avec la selection en moins c'est nikel
je vérifie si ma trituration dans newnode est bonne c'est ok

je insertberfore le font restant je me retrouve avec les anciens font texshadow a l’intérieur de mes newfont shadow c'est ahurissant

débile je dis moi
je commence a me demander si j'ai bien fait de vouloir travailler en javascript sérieusement

c'est formidable tu delete un range tu affiche le parent innerhtml c'est nikel tu insert et les anciens sont de nouveau la

debile debile debile et vive le VB

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
<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 backcol(coul,MOD){
var ranges  =window.getSelection();
var mySelectionhtml  =ranges.getRangeAt(0).cloneContents(); 
var parent=ranges.getRangeAt(0).commonAncestorContainer;
var balparentclone=parent.cloneNode(true);
var newNode  = document.createElement("FONT");
newNode.appendChild(mySelectionhtml);
if(MOD==true){newNode.style.textShadow ="0px 0px 10px "+coul;}
var str=newNode.innerHTML;
var f=newNode.getElementsByTagName("FONT");
for(var i=0;i<f.length;i++){
if( f[i].style.backgroundColor==""){str=str.replace(f[i].outerHTML,f[i].innerHTML);}
}
 alert(str);
ranges.getRangeAt(0).deleteContents();
 
 
 var rangeObjG = document.createRange();    
 // rangeObjG.setStart(parent 0); //une autre manière de fixer le startContainer que je préfère serait d'utiliser :
 rangeObjG.selectNodeContents(parent); 
  rangeObjG.setEnd(ranges.getRangeAt(0).startContainer, ranges.getRangeAt(0).startOffset);
var newgauche=document.createElement("div");newgauche.appendChild(rangeObjG.cloneContents());
var reste=newgauche.lastChild.outerHTML;
alert (" la balise de devant" +reste);
 ranges.removeAllRanges();
if (reste!="undefined"){
alert(parent.innerHTML);
var f=parent.getElementsByTagName("FONT");
for(var i=0;i<f.length;i++){
if( f[i].outerHTML==reste){
alert(f[i].outerHTML);parent.insertBefore(newNode, f[i].nextSibling);  }
}
}
 //ranges.removeAllRanges();
 // ranges.addRange(rangeObjG);
 
 
 
 
 
 
document.getElementById('res').value=document.getElementById('comment').outerHTML;
 
 
 
 
}
</script>
</head>
<body>
    <div id="comment" class="comment" contenteditable>
 
 
 
<p><font size="5">teste de <font style="text-shadow: 0px 0px 10px red;"><strong>te</strong></font><font style="text-shadow: 0px 0px 10px blue;"><strong><font color="red"><em>xt</em>e</font></strong></font><strong><font color="red"></font></strong> shadow</font></p>
 
 
 
 
 </div>
 
<input type="button"value="backblue" onclick="backcol('blue',true)"/> 
<input type="button"  value="backgreen" onclick="backcol('green',true)"/> 
<input type="button" value="backRED" onclick="backcol('red',true)"/> 
<input type="button" value="backmagenta" onclick="backcol('magenta',true)"/> 
</br>
<textarea id="res"rows="15" cols="100">
</textarea> 
</body>
</html>

08/03/2017, 20h19
Beginner.

Oui c'est ça quand on insère il n'optimise pas et au finale on se retrouve avec des balises en plus...

C'est pourquoi je cherche à éviter l'insertion et donc à travailler directement sur le dom et non sur un clone qu'on devra insérer...

J'ai d'ailleurs ouvert ce fil :
Obtenir tous les éléments situés à l'intérieur d'une sélection ?
08/03/2017, 21h11
Beginner.

Continuons dans l'autre fil () car celui-ci est en fait résolu par rapport à la question posée dans le titre...