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

**patricktoulon** · 06/03/2017, 22h57

re

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

**Beginner.** · 07/03/2017, 01h28

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

Envoyé par patricktoulon

a oui!!! tu peux me faire un exemple

Essai ça : http://jsbin.com/hecoyokece/1/edit?js,output

**patricktoulon** · 07/03/2017, 17h47

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

sélection
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
donc creation d'un nouveau range ou add range
autrement dit il faut faire une range intermediaire
remplacer shadow par back
execcomand backcolor sur la selection premiere
remplacement du nouveau back par shadow même couleur sur la selection 1
remplacement du back previussibling par shadow même couleur
remplacement back par shadow même couleur pour le nextsibling
ou directement travailler sur la selection 2
et voila c'est execcomand qui fait tout le boulot

voila mon raisonnement

**patricktoulon** · 07/03/2017, 21h15

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 :

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

**Beginner.** · 07/03/2017, 22h42

Ok je vais tester et essayer de comprendre...

**patricktoulon** · 07/03/2017, 22h56

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

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

**Beginner.** · 07/03/2017, 23h28

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

**patricktoulon** · 07/03/2017, 23h59

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"</font>(0)

**Beginner.** · 08/03/2017, 18h34

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

**patricktoulon** · 08/03/2017, 20h02

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

**patricktoulon** · 08/03/2017, 20h40

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 :

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

**Beginner.** · 08/03/2017, 21h19

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 ?

**Beginner.** · 08/03/2017, 22h11

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

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

JavaScript

Discussions similaires

Partager

Partager