Discussion :

[patricktoulon]

ok des nodetype 3 donc

[patricktoulon]

ps::!!!!
coment fait on pour récupérer le innerHTML DE LA SELECTION SANS APPENDcHILD DANS UNE BALISE???
j'avais l'astuce mais comme j'ai virer pas mal de fichiers d'essai je ne l'ai plus

[Beginner.]

Ben il y a plusieurs façons mais pour l'instant les exemples que j'ai vus passent par un fragment... Et donc dans le cas de balises coupées on retrouvera dans le fragment ces balises ré-ouvertes...

[patricktoulon]

Bonjour beguinner

bon ben ce matin je suis arriver a supprimer oSpan a la fin pour ne laisser que le texte d'origine dans la selection sans les espace

mais c'est pas concluant car :
comme le principe en lui même referme les balise et en créé dans la selection au cas ou l' on en a coupé une en sélectionnant
le texte n'est plus d'origine forcement de plus la correction de l'emplacement des espaces sans oSpan devient difficile a gérer
because (" "/" ")qui ne donne pas le même résultât selon leur emplacement

donc cette méthode n'est valable que si l'on veut travailler avec une balise (font/span/etc...)et un attribut particulier en cooccurrence ici le style shadow
car le netoyage se fait sur ces criteres

j'ai aussi trouvé un autre moyen pour espG/midle/espD aussi propre

[Beginner.]

Ben c'est ce que je te disais, parfois les espaces peuvent être dans des balises différentes...

[patricktoulon]

ca n'est pas les espaces difficile a gérer qui m'ennuie j'y arrive quand même
c'est le fait que :
dans la sélection les balises sont reconstruite ainsi qu'a gauche et a droite parti de la a la fin c'est nikel mais je n'ai pas le code d'origine
il faut donc travailler avec une balise tout en meme temps (pour l'universalité) trouvé le moyen de faire le netoyage des balises avec parametres
c'est a dire que la on nettoie ospan en supprimant les span pour enlever tout les shadow mais pour une autre fonction et pour une autre personne les span ne seront peut etre pas des shadows et donc pas a enlever

tu vois pour une contribs il faut pousser loin loin mais on va y arriver ca c'est sur

regarde comment je gère espG et espD et midle apres le netoyage initial dis moi ce que tu en pense

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
if (oSpan.firstChild.nodeType==3){
 espG=espG+str.split(oSpan.firstChild.data.trim())[0];
 midle=str.replace(espG,"");
}
if (oSpan.lastChild.nodeType==3){
D=str.split(oSpan.lastChild.data.trim());
espD=D[D.length-1]
midle=str.replace(espD,"");
if(midle.substr(midle.length-1)==" "){midle=midle.substring(0,midle.length-1);espD=espD+" ";}
 }
oSpan.innerHTML=midle;
alert(oSpan.outerHTML);

[Beginner.]

c'est a dire que la on nettoie ospan en supprimant les span pour enlever tout les shadow mais pour une autre fonction et pour une autre personne les span ne seront peut etre pas des shadows et donc pas a enlever

Oui il faut donc rajouter un ou plusieurs critères : ça pourrait être "balises span + style shadow" ou ajouter une class "shadow" par exemple, là c'est facile...

[NoSmoking]

Remarques dont tu feras ce que tu veux

Je viens de tester ton code post #218 !
• Il te faut tester l'existance de tes objet avant de vouloir accéder à leurs propriétés ainsi dans ce code

Code :

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

1
2
3
4
5
6
7
8
9
  do {
    par = par.parentElement;
    if (par.tagName == 'SPAN' && par.style.textShadow == '0px 0px 10px ' + coul) {
      noC = true;
    }
    if (par.tagName == 'SPAN' && par.style.textShadow != 'none') {
      no = true;
    }
  } while (par.tagName != 'P');

ré indenté car toujours aussi illisible, si par vaut null cela plante ce qui est le cas si l'on fait une sélectionne en début de <p> par exemple ou à cheval sur deux lignes.

• Si l'on fait une sélection de 3, ou plus, espaces la sélection est ajoutée au texte.


Concernant ton dernier code, je vois avec plaisir que tu essaies de faire une fonction « Text.splitText() like » ce qui est dommage celle-ci fonctionnant justement pour de tels cas.


Enfin je dirais que quand je pense que le code que je t'ai proposé à était qualifié « d'usine à gaz » je ne peux qu'être

Il est à noter qu'il faut aussi prendre en compte les différentes interprétations des navigateurs devant un appui sur la touche Entrée, c'est au choix <p>,<div> ou <br> ce qui fait qu'il faudra également vérifier la conformité du code que tu rend exemple pas de <div> dans un <span>.

Bon courage quand même pour la suite !

[patricktoulon]

Bonjour noSmoking

si tu utilise le dernier exemple sur l'autre post il est normal que tu es ces deux erreurs
en effet avec cet exemple on ne peut que travailler sur un seul mot entouré d'espaces je l'ai d'ailleurs signalé que c’était pas bon
dans les exemple que tu a ici ca n'est plus le cas
dans le doute je viens de tester la sélection de debut de "P" et je n'ai pas d'erreur de par dans le debuger
attention je ne travaille que sur une ligne il n'est pas pour le moment question de plusieurs lignes

quand a ton text.splitText oui je commence a le comprendre c'est que pour moi split travaille sur du string et la je vois que ce split la prend le neud je peux changer ça dans le dernier exemple c'est pas bien compliqué

le travail de décision n’étant pas le split mais ou!!!! couper

après nos deux code on les mêmes symptômes
1 il modifie le code
2 il laisse parfois des spans remplis d'espaces ( le mien ne le fait plus)

le plus gros du travail pour moi étant cela because je voudrais généraliser le trimrange a toute les fonction texte

c'est a dire que même pour les fonctions qui execute execcommand"fonction",x,y) un trimrange sera exécuté

d'ou l’importance de ne pas modifier le code l' obligation (du moins je crois) de travailler avec les ranges et fragments

pour m’éviter de lire des pages entières et dieu sait que j'en ai lu pas mal existe-t 'il un outils (une constante,fonction) pour les ranges pour décaler le texte de X caractères a droite ou a gauche

je suis content de te relire

[Beginner.]

...existe-t 'il un outils (une constante,fonction) pour les ranges pour décaler le texte de X caractères a droite ou a gauche

Je n'ai pas compris ce que tu veux mais n'oublie pas que tu peux ouvrir un fil pour une question spécifique et c'est mieux car d'autres membres pourraient avoir une idée alors qu'ici la longueur du fil est dissuasif...

Si tu ouvres un nouveau fil essai de donner un exemple de ce que tu veux car là je n'ai pas compris...

[patricktoulon]

re
ben la question est très simple en fait

j'ai un texte exemple "un tres joli oiseau tombé du ciel "

"un tres joli " = nodeType 3

"oiseau" = nodeType 1

" tombé du ciel "=nodeType3

je sélectionne "tres joli oiseau "

je voudrais décaler la sélection a "joli oiseau"

le range(range.startcontainer,x) me décale de noeud en noeud pas en caractères

mais si tu veux on ouvre une autre discussion il n'y a pas de soucis

[NoSmoking]

si tu utilise le dernier exemple sur l'autre post (...)

après nos deux code on les mêmes symptômes
1 il modifie le code
2 il laisse parfois des spans remplis d'espaces ( le mien ne le fait plus)
[B]

pour moi ton approche n'est pas la bonne, tu entoures le texte sélectionné par la balise adéquate et ensuite tu nettoies le code.

Tous les éditeurs ont un « nettoyeur » de code pour tenir compte des changement dans le DOM, au minimum il faut

• normalisation du code ;
• suppression des noeuds vides ;
• regroupement des éléments de même style ;
• ...

mais il me semble l'avoir déjà mentionné !

(...)existe-t 'il un outils (une constante,fonction) pour les ranges pour décaler le texte de X caractères a droite ou a gauche

il existe les méthodes liées à l'objet Range

le range(range.startcontainer,x) me décale de noeud en noeud pas en caractères

cela me fait penser à Text.splitText()

[Beginner.]

Là tu me fais rire (façon de parler ce n'est pas méchant...)

Cela fait plusieurs pages qu'on tourne autour de la question et ça fait un moment déjà que je soupçonnais qu'on en reviendrait aux ranges...

Faire ce que tu veux ne me semble pas aussi simple que tu le crois et on va en revenir aux fonctions développées par NoSmoking comme je le présentait...

mais si tu veux on ouvre une autre discussion il n'y a pas de soucis

Oui ce serait mieux à mon avis...Les autres membres pourraient avoir des idées, ce serait dommage de s'en priver...

[patricktoulon]

non on ne va pas y revenir ca c'est sur comme ca c'est clair

normalisation ("normalise() ") tu pense bien je m'y suis intéressé IE11 walouh!!!!!

ensuite dans la version que je suis en train de faire simplement pour le trimrange j'extract pas le dom n'est pas modifié jusqu'au dernier moment
et je dirais meme mieux dans la version que je suis en train de d'analyser
je change rien au code initial dans le range (fragment(1,2,3) mis a part un span vide avec ID après les epaces pour le devant et avant les espace pour la droite
de facon a jouer avec les start et et end et bien crois moi pas si tu veux il me mes doubles alors qu'il sont bien fermés et n'ont aucune incidence sur le code innitial le visuel reste le meme
dis moi alors pourquoi il fait ca
exemple j'ai les point sont des espaces )

".......blablabla<font> truc</font> <font> machin</font>........."
dans ma methode je fait ca :
".......<pan id="GG"></span>blablabla<font> truc</font> <font> machin</font><pan id="DD"></span>........."

GG et DD seront le start et le end on est d'accords (on les remove après on s'en fout)
et bien a la fin de l'operation je me retrouve avec :
".......<pan id="GG">........</span>blablabla<font> truc</font> <font> machin</font><pan id="DD"></span>........."

allez dis moi ou elle est la logique du comportement du dom la
ne me sort pas de salade il n'y en a pas surtout que sur 5 essais le nombre d'espaces est différents avec le mémé codehtml de départ et le même code javascript pour les 5 essais

[Beginner.]

Comment veux-tu que je te réponde je ne sais pas ce que tu fais, quel code tu appliques...

Il faut que tu me donnes le code et l'exemple pour que je regarde cela dans ma console...

Fait un exemple dans JSBin comme je le fais...

[patricktoulon]

tiens un brouillon de ce que je suis en train d'essayer de faire

j'en perd le nord

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
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
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
<!doctype html><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
white-space: pre;
}
 
 
-->
    </style>
    <script>
function trimrangeLR() {
    var espG = "";
    espD = ""
 
 
var sel = window.getSelection();
var parent = sel.getRangeAt(0).commonAncestorContainer;
    if (parent.nodeType === 3) { parent = parent.parentNode;}
    var mySelecthtml = sel.getRangeAt(0).cloneContents();
    var oSpan = document.createElement("SPAN");
 oSpan.appendChild(mySelecthtml);
 var str=oSpan.innerHTML;
 //alert(oSpan.innerHTML);
 
 var B = oSpan.getElementsByTagName("*")
   for (var i = 0; i < B.length; i++) {
    if (B[i].tagName == "SPAN") {   str = str.replace(B[i].outerHTML, B[i].innerHTML);}            
 if (B[i].innerHTML== " " ) { str = str.replace(B[i].outerHTML, "");espG=" "}
if (B[i].innerText == "" && B[i].tagName != "IMG") {    str = str.replace(B[i].outerHTML, "");}
 
 }
oSpan.innerHTML=str
 
 
var midle=str;
alert("néttoyé :"+str);
 
 
 
 
 
 
 
 
oSpan.innerHTML=midle;
 
 
if (oSpan.firstChild.nodeType==3){
 espG=espG+str.split(oSpan.firstChild.data.trim())[0];
 midle=str.replace(espG,"");
}
if (oSpan.lastChild.nodeType==3){
D=str.split(oSpan.lastChild.data.trim());
espD=espD+D[D.length-1]
midle=str.replace(espD,"");
if(midle.substr(midle.length-1)==" "){midle=midle.substring(0,midle.length-1);espD=espD+" ";}
 }
oSpan.innerHTML=midle;
alert(oSpan.outerHTML);
 
 
espG=espG+"<span id=GG></span>"
espD="<span id=DD></span>"+espD
 
 
var range = sel.getRangeAt(0)
    range.deleteContents(); // on delete le range complet 
    if (range.createContextualFragment) {
        fragment = range.createContextualFragment(espG+oSpan.innerHTML+espD); //on créé un fragment avec espG ,oSpan et espD
    }
if (espG!=""){
 var fL = fragment.childNodes.length;
    for (var L = 0; L < fL; L++) {
        if (fragment.childNodes[L].id == "GG") {
            var firstInsertedNode = fragment.childNodes[L]; //on determine le debut du fragment AVEC OSPAN
        } 
 
 if (fragment.childNodes[L].id == "DD") {
            var lastInsertedNode  = fragment.childNodes[L]; //on determine le debut du fragment AVEC OSPAN
        } 
  }
}
 
 
 
 
 
 
  range.insertNode(fragment);
 
 
 
 
 if (firstInsertedNode) {
        range.setStartBefore(firstInsertedNode); // ET VOILA C4EST ICI QUE L'ON GARDE rien que  OSPAN DANS LA SELECTION
        range.setEndAfter(lastInsertedNode);
    }
 sel.removeAllRanges(); //on  supprime le range 
    sel.addRange(range); //  on garde la selection active 
 
 
 
 
 
 
 
    //////////////////////////////////////////////////////////////////// 
    document.getElementById('res').value = document.getElementById('comment').outerHTML;
//return window.getSelection().getRangeAt(0);
}
 
 
 
 
 
 
 
 
 
 </script>
</head>
 
 
 
 
<body>
    <div id="comment" class="comment" contenteditable>
<p>
                du texte sans format
    </p>
 
 
        <p>
                <font size="5">du texte <font style="background-color: yellow;">tout</font> seul <font style="background-color: rgb(0, 255, 0);">enfant</font> direct du div </font>
        </p>
 
 
 
 
        <p align="">
            <font size="5">teste <span style="text-shadow: 0px 0px 10px blue;">de</span> <span style="text-shadow: 0px 0px 10px red;">texte</span><span style="text-shadow: 0px 0px 10px green;">shad</span><span style="text-shadow: 0px 0px 10px red;">ow</span> pour testes</font>
        </p>
 
 
        <p align="center">
 
 
        <font size="7"> E<font color="#ff0000">XE</font><img src="data:image/gif;base64,R0lGODlhEgATAOedAABUAgBWDAZXBgBdHABfE24+Fg5dDgJhKhJgElhKLxRhFBViFXBHGxJmFwtrMERgGAB0LAB2HQB6IBl+QxaFMgCKQ1ZzOheGOJBjMB+DR8pYCZxjK6NjKA2NSCCJOatjJCSKO71jHQCXSrhmGgiXS8pjF9dkErJtKwCjTzKVVMJwKsRwJchwJ/JnCNJwH02UWuBvGVOTW/9tCOB1Hg2uV9l4H/9xCep2Gfd3HGOcYw24Vh6zWvp5Ghi3W+x+IcOHQfJ9HPSAHf9+FP9+F/9+GPaCH/+AHaOYbP+KH/+KLP+NHf+NJfyOJP+OHv+MO/+RJPWVJv+TJf+TOf+VJv+WK/+YJf+YLv+ZLv+cLv+cMf+fK/+fL/ejM/+hM5a3lv+kNP+mNf+nMP+qPP+pU/+tN/+wO/+xPP+wR/+yOv+yPf+0N/+0O/+xXf+1O/+3PPe4WP+1X/+8Pv+4a/+6aP++Rv+6b/++Sf+/Rf+8c//BTf+/ZP/CR/+/cf/DTv/Bb//GQv/EV//DYv/JRP/GY//Gav/NSP/Ijf/Ob//Pg//TZ//VdP/Xcv/ZbP/XnP/cbP/biP/alv/bk//hbf/flP/flv/kd//juP/ujf/zcv/xn//zkP/zpv/5tP///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////yH5BAEKAP8ALAAAAAASABMAAAjhAP8JHIhIUZuBCBMKtMQpUZwuYOwAUjiwEaY/a764KVQJUpaEcAgNOhMJzRUrTQSFkeJEzEA5mzI9+tPmyRAiQqqMMTTJER6Bh/TwmRNFCw4WKkwE2bKEihkjAstQuuQnDZkfRxIUADIFiYwbKwSykUSzThIXDDTYUJKHSwkMCGtAwVKECZ09au4wenOCIocQG3xoWtQnEI8P/3IopthiBgwYIx54iTGhA40XFAdaUHAhQwoSKBwYyCyQAoABB0RUgBCB9L8eAv4FICDB9UAPthXuaJA7IYjeCHUsAD4QAcKAADs="><font face="Algerian">M</font><font face="Broadway">P</font>L<img src="data:image/gif;base64,R0lGODlhFAAUAKUwAAAAABADAzMBAQAxAAYwMVICAnIAAABFAABVBABvEgBrKAF2NAJXHglzQyJdUVRvY2BTMJMCAqoBAckBAP8AAOoAAMQsJwCOLACvLACVFQDPMQ2LSyWMWDWSZiurbgOpU0mPbwrYZ/8A/3GVilKpfmyzmmnLmnbTq2bjqS3ciYu4r5LLsKjl2LbTzf+Fibdzcf///////////////////////////////////////////////////////////////yH5BAEsAT8ALAAAAAAUABQAAAbWwJ9w+IsILBOikkgoRCgVgGTyeC2HAAolUJACBICJwBBRlrSUsIDSjRQqb2VWAjCsu1CKpJAkQihgegITE2l0FAZLawBPdWxgFWVLKlpeFQGIAA5XQiVregAFEgZ9nD9fEYR2iKY/KhVosQCtPxJ5AAAELEMKHAs/JAoKByYsIwAJF0QHDBonBwM/CBsrGBko0rs/IAkYKMJEAxchIdEOH8ADIR4kDSRKBwcp6w4e0vMtCAcrSwoICiM+sOigL14CflcWlBihgUEHWksyMICoRAUCFa2CAAA7">E DE TEXTE</font> </p>
 
 
    </div>
 
 
 
 
     <input type="button" value="test" onclick="trimrangeLR(false,null)" />
    </br>
    <textarea id="res" rows="15" cols="100">
</textarea>
<script>
document.getElementById('res').value = document.getElementById('comment').outerHTML;
</script>
</body>

[patricktoulon]

sur js.bin