Version imprimable
bonsoir a tous
@nosmoking
je connaissais pas les 3 fonctions que tu démontre
et ben voila c'est ca q'uil me faut, si elle font ce que leur nom semble indiquer c'est parfait c'est exactement ce que je cherche
je vais potasser cela et éventuellement les monter dans mon code de base
Ben je crois qu'elles n'existent pas encore... A moins que je me trompe ce sont les fonctions qu'il te propose de développer si cela te convient... En fait je crois qu'il voulait tout d'abord exposer les différentes étapes d'une manière claire et structurée (algorithme) avant l'éventuel développement des fonctions...Citation:
Envoyé par patricktoulon
Mais peut-être que j'ai mal compris...
d'acords je comprend mieux je cherche depuis tout a l'heure :ptdr:
ben oui le shema est bien celui là ,pourquoi pas
J'avoue que moi aussi j'avais fait une recherche au cas où j'aurais mal compris...
J'ai testé ton code, la plus part du temps il fonctionne bien, il y aurait des points à peaufiner mais cela reviendrait à faire ce que propose NoSmoking donc autant le refaire proprement selon le schema qu'il propose. De toute façon avec ton code il y a aussi le problème de la multiplication des balises dont on a parlées...
re
oui avec la dernière mouture il y a quand meme des doubles qui ne partent pas mais il faut quand même faire quelques shadows avant le déraillement
Tu peux avoir une multiplication par deux des balises dés le premier shadow, cela ne dépend pas du nombre de shadow mais de l'endroit où tu veux l'appliquer...
Si on reprend ton code tel quel avec le texte "teste de texte shadow" (mais avec le shadow qu'on ne voit pas ici) et qu'on sélectionne par exemple "te shado" on obtient une multiplication par deux des trois balises suivantes : <strong>, <font color="red"> et <em>
bonjour beguinner et noSmoking
je pense avoir une solution pour un netoyage car j'ai remarquer un detail intéressant selon le mode d'extraction
en effet
extractcontent VS clonecontents
il se trouve que selon le mode utilisé les doublons et toutes cochonneries confondues sont dans le parent ou le oSpan
j'ai repris les quelques ligne de noSmoking et ajouté le nettoyage primaire
il se trouve que si c'est extractcontents c'est le foutoir dans oSpan et nikel dans le parent et inversement avec clonecontents
n'y aurait il pas un moyen de faire avec les deux?
testez en changeant le mode vous verrez
Code:
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<html> <head> <meta http-equiv="X-UA-Compatible" content="IE=11"> <style type="text/css"> <!-- .editor { font-family: tahoma } .actionbar { background-color: #c0c0c0; border: 1px solid black } .comment { border: 2px dotted red } --> </style> <script> function replaceSelection(coul) { var oSelection = window.getSelection(); var oRange = oSelection.getRangeAt(0); var oParent = oRange.commonAncestorContainer; //var oSelectedText = oRange.cloneContents(); // avec clonecontents les fantomes sont dans le parent var oSelectedText = oRange.extractContents(); //avec extract les fantomes sont dans le oSpan var oSpan = document.createElement('SPAN'); oSpan.appendChild(oSelectedText); //oRange.deleteContents(); //remove le tyleinline txt-shadow simplement en gardant le innerHTML des spans var sp = oSpan.getElementsByTagName("SPAN"); for (var i = sp.length - 1; i >= 0; i--) { oSpan.innerHTML = oSpan.innerHTML.replace(sp[i].outerHTML, sp[i].innerHTML); } var ft = oSpan.getElementsByTagName("FONT"); for (var i = ft.length - 1; i >= 0; i--) { //if (ft[i].innerText=""){ft[i].parentElement.removeChild(ft[i]);} } document.getElementById('res').value = document.getElementById('comment').outerHTML; document.getElementById('innernewnode').value = oSpan.outerHTML; } </script> </head> <body> <div id="comment" class="comment" contenteditable> <p> <font size="5">teste de <span style='text-shadow: 0px 0px 10px red;'><strong>te</strong></span><span style="text-shadow: 0px 0px 10px blue;"><font color="red"><strong><em>xt</em>e</strong></font></span><strong><font color="red"></font></strong> shadow</font> </p> </div> <input type="button" value="backblue" onclick="replaceSelection('blue')" /> <input type="button" value="backgreen" onclick="replaceSelection('green')" /> <input type="button" value="backRED" onclick="replaceSelection('red')" /> <input type="button" value="backmagenta" onclick="replaceSelection('magenta')" /> <input type="button" id="html" value="coupe" onclick="coupe()" /> <input type="button" id="html" value="HTML" onclick="alert(document.getElementById('comment').innerHTML)" /> </br> <textarea id="res" rows="15" cols="100"> </textarea> <textarea id="innernewnode" rows="15" cols="100"> </textarea> </body> </html>
c'est presque que cela si l'on s'en réfère à la recommandation : 2.10. Surrounding Content.Citation:
Ah merci j'ai mis un moment à capter, je ne comprenais pas à quel moment la span était insérée dans le DOM, c'est apparemment la méthode oRange.surroundContents(oSpan); (que tu m'as fait découvrir) qui fait cela à elle seule... Oui car d’après ce que j'ai compris on pourrait se passer du appendChild() car surroundContents() serait (presque ?) équivalent à : extractContents() + appendChild() + insertNode().
Trois pour le prix d'un...
Son fonctionnement est délicat because les exceptions qui demande une manipulation des points limites, d'ailleurs dans le code que j'ai fourni ce n'est pas cette ligne qui devait figurer mais bel et bienCitation:
Je vais quand même regarder si le fonctionnement est le même...
puisque j'extrais le contenu et l'append après. Tu l'as d'ailleurs découvert dans tes tests.Code:
2
• Concernant les fonctions, effectivement ce ne sont pas des fonctions standard, mais pas impossible de trouver des équivalences sur la toile.
Entrons dans le vif du sujet avec ces fonctions que j'ai regroupé dans un fichier inline-style.js que je mets ci dessous
C'est plus simple qu'il n'y paraît et abondamment commenté pour une meilleur compréhension, possible qu'il y ait des améliorations à faire.Code:
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
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
• Concernant la fonction shadowColor, après rapide test pas grand chose de neuf
je noterais quand même qu'il faut nettoyer TOUS les enfants, au moins les <p> et les <span>, du oSpan et pas seulement les <span>.Code:
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
• Concernant le nettoyage, fonction cleanEditor, j'ai identifié, dans un premier temps, les actions suivantes :
il y aurait également le regroupement d'éléments contiguë ayant le même style et sûrement bien d'autres si l'on veut épurer le code résultant au maximum. La porte est ouverte en GRAND :mouarf:
- normalisation du HTML, pas d'enfant <p> dans un parent <span>, cela peut arriver
- suppression des élément <span> n'ayant pas d'attribut donc inutile
- Supprime des éléments vides
On obtient la fonction suivante, évolutive donc
Les fonctions utilisées sont décrites ci-dessous avec je l’espère les commentaires nécessaires et suffisants à leur compréhension, comme toujours elles sont sûrement améliorables/optimisables mais d'après mes tests elles fonctionnent plutôt bien.Code:
2
3
4
5
6
7
8
9
certaines d'entre elles sont des classiques, je pense notamment à unwrap et clearWhiteSpace, qui trouvent leur utilité ailleurs que dans ce cas bien précis.Code:
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
• Bonus
Pour finir je vous ai mis le fichier de test sur developpez : Test manipulation du DOM.
Il y a des commandes pour permettre de voir le travail de chaque nettoyage. Bon amusement :mrgreen:
nota: on est quand même très mais alors très loin d'un CKEditor
Bonjour noSmoking
a oui belle Démo en plus c'est bien on a la visibilité(voir les spans)
oui sauf que ca marche pas totalement ta méthode
regarde après 3 changement de couleur le nombre de spans on voit bien les carrés et a un moment donné la couleur ne change même plus
j'aurais aussi quelque questions sur la syntaxe de quelques lignes dont je ne comprends pas le sens certainement du au fait qu'en VB ce genre de manip est impossible
j'ai encore trop de réflexe VB
Pièce jointe 253700
dans ta méthode et la mienne on a le même soucis
quand on sélectionne une balises en shadow entière plusieurs fois et que l'on change la couleur la couleur précédente devient parent de la nouvelle couleur
peut être dans ton principe de remontée de l'arbre monter un cran de plus
il y a aussi le problème des espaces
quand on sélectionne un mot avec un espace devant ,que l'on met la couleur et que l'on re sélectionne le même mot mais sans l'espace devant le résultât est le même que précédemment cité
c'est assez étonnant ces comportement c'est même un casse tète chinois
exemple dans ce wysiwyg celui de DVP que j'utilise au moment ou je suis en train d’écrire et bien le doubleclick sélectionne le mot et !!!! l'espace APRES!!!!! tandis que le mien c'est celui d'avant
je pense q'il faudrait trouver le moyen de supprimer l'espace devant et après la sélection dans la collection ranges avant de traiter ça éviterait le soucis N°2 précédemment cité
ps: j'aurais juste besoins de savoir si ma syntaxe est bonne est surtout valide
Code:
2
re
bon ben je suis aller jusqu'au bout de mon idée avec extractcontent() et contextualfragment
j'ai un résultat quasi hyperpropre sauf les "</strong><strong>" ,"</em><em>" dans la meme balise parent
j'ai mis des commentaires a gogo
Code:
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<!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 } --> </style> <script> function replaceSelection(coul) { var sel, range, fragment, str; sel = window.getSelection(); var oParent = sel.getRangeAt(0).commonAncestorContainer; ////tagParent=sel.getRangeAt(0).startContainer.parentNode.tagName; var mySelectionhtml = sel.getRangeAt(0).extractContents(); var Span = document.createElement("SPAN"); Span.appendChild(mySelectionhtml); // on place les éléments de la sélection dans Span Span.innerHTML = Span.outerHTML; // au cas ou on sélectionne une balise shadow complète on prend le tag span de l’élément en tant qu'enfant du nouveau span var str = Span.innerHTML; //recupération du string html de l'innerhtml du span var sp = Span.getElementsByTagName("*"); //collections de tout les spans et autre balises interne a Span for (var i = 0; i < sp.length; i++) { // on demarre la boucle sur TOUT!! les elements if (sp[i].tagName == "SPAN") { //si c'est un SPAN !! str = str.replace(sp[i].outerHTML, sp[i].innerHTML); // suppression des span dans Span en ne gardant que l'interieur des spans } if (sp[i].innerText == "") { // si c'est une balise vide quelque soit le tagName str = str.replace(sp[i].outerHTML, ""); // supression des balises vides cela arrive quand on a une sélection entière le dom reproduit la balise de debut a la fin } } if (coul != false) { Span.style.textShadow = "0px 0px 10px " + coul; // si coul une couleur alors shadow } else { Span.style.textShadow = "none"; //sinon NONE !!! } //str = str.replace(/"<\/strong><strong>"/g, ""); ////RESTE A REGLER CES DEUX SOUCIS // str = str.replace(/"<\/em><em>"/g, ""); Span.innerHTML = str; //on replace le code néttoyé dans le nouveau SPAN document.getElementById('innernewnode').value = " code de newnode :" + Span.outerHTML; if (sel.getRangeAt && sel.rangeCount) { range = sel.getRangeAt(0); range.deleteContents(); // on delete le range complet if (range.createContextualFragment) { fragment = range.createContextualFragment(Span.outerHTML); //on créé un fragment } var firstInsertedNode = fragment.firstChild; //on determine le debut du fragment var lastInsertedNode = fragment.lastChild; //on determine fin du fragment range.insertNode(fragment); //on insert dans le range que l'on vider le fragment issue du new span que l'on a nétoyé if (firstInsertedNode) { // si j'ai bien compris on bride le range au fragment ainsi les range vide deletée précèdemment ont disparu donc 1 seul range range.setStartBefore(firstInsertedNode); range.setEndAfter(lastInsertedNode); } sel.removeAllRanges(); //on peut carrément supprimer le range sel.addRange(range); // et y ajouter notre range tout propre } //dernier nettoyage du parent container cette fois (pas utile tout le temps) var sp = oParent.getElementsByTagName("*"); for (var i = 0; i < sp.length; i++) { if (sp[i].innerText == "") { sp[i].parentElement.removeChild(sp[i]); } if (sp[i].innerText == " ") { sp[i].parentElement.replaceChild(sp[i], " "); } } document.getElementById('res').value = document.getElementById('comment').outerHTML; } </script> </head> <body> <div id="comment" class="comment" contenteditable> <p> <font size="5">teste de <span style='text-shadow: 0px 0px 10px red;'><strong>te</strong></span><span style="text-shadow: 0px 0px 10px blue;"><font color="red"><strong><em>xt</em>e</strong></font></span><strong><font color="red"></font></strong> shadow</font> </p> </div> <input type="button" value="backblue" onclick="replaceSelection('blue')" /> <input type="button" value="backgreen" onclick="replaceSelection('green')" /> <input type="button" value="backRED" onclick="replaceSelection('red')" /> <input type="button" value="backmagenta" onclick="replaceSelection('magenta')" /> <input type="button" value="none" onclick="replaceSelection(false)" /> <input type="button" id="html" value="coupe" onclick="coupe()" /> <input type="button" id="html" value="HTML" onclick="alert(document.getElementById('comment').innerHTML)" /> </br> <textarea id="res" rows="15" cols="100"> </textarea> <textarea id="innernewnode" rows="15" cols="100"> </textarea> </body> </html>
Super ! Merci, c'est vraiment pratique...Citation:
Envoyé par NoSmoking
J'ai commencé à faire quelques tests, je doit continuer... Et je regarderai aussi le code...
Oui j'avais aussi remarquer cela mais je pense qu'on doit pouvoir régler ça...Citation:
Envoyé par patricktoulon
J'ai remarqué qu'il fallait peut-être distinguer deux cas : application d'un shadow et suppression d'un shadow. Dans le premier cas je crois bien que la multiplication des balises est moins grave car de toute façon avec l'autre solution on doit aussi utiliser plusieurs balises (voir les deux comportements différents de la fonction execCommand que Loralina a mentionnés ici : ).Citation:
Envoyé par patricktoulon
Et pour ton code il y aurait peut-être des choses à rajouter pour éviter certains problèmes que j'avais remarqués mais sinon il a l'air de bien fonctionner dans la plupart des cas...
J'ai regardé et je pense que cette partie :Citation:
Envoyé par patricktoulon
Pourrait être remplacée par un simple range.insertNode(Span);... C'est à tester...Code:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22if (sel.getRangeAt && sel.rangeCount) { range = sel.getRangeAt(0); range.deleteContents(); // on delete le range complet if (range.createContextualFragment) { fragment = range.createContextualFragment(Span.outerHTML); //on créé un fragment } var firstInsertedNode = fragment.firstChild; //on determine le debut du fragment var lastInsertedNode = fragment.lastChild; //on determine fin du fragment range.insertNode(fragment); //on insert dans le range que l'on vider le fragment issue du new span que l'on a nétoyé if (firstInsertedNode) { // si j'ai bien compris on bride le range au fragment ainsi les range vide deletée précèdemment ont disparu donc 1 seul range range.setStartBefore(firstInsertedNode); range.setEndAfter(lastInsertedNode); } sel.removeAllRanges(); //on peut carrément supprimer le range sel.addRange(range); // et y ajouter notre range tout propre }
Je pense aussi que tu pourrais éviter de passer par une string, je pense que ce n'est pas plus long ni moins rapide si par exemple tu remplaces ceci :
str = str.replace(sp[i].outerHTML, sp[i].innerHTML);
par ceci :
sp[i].outerHTML = sp[i].innerHTML;
Même principe pour les autres lignes...
C'est à tester...
je vais vérifier caCitation:
Je pense aussi que tu pourrais éviter de passer par une string, je pense que ce n'est pas plus long ni moins rapide si par exemple tu remplaces ceci :
str = str.replace(sp[i].outerHTML, sp[i].innerHTML);
par ceci :
sp[i].outerHTML = sp[i].innerHTML;
Même principe pour les autres lignes...
pour insertnode je sais pas
depuis que j'ai posté il a encore évolue
et puis j'ai progressé aussi dans le même sens avec l'autre version utilisant la re sélection de ce qui reste a gauche
bon ben
n'a pas du tout le même effet ca me laisse les shadow qui éventuellement se trouve au milieu de la selectionCode:sp[i].outerHTML = sp[i].innerHTML;
insertnode span par contre ca a l'aire de fonctionner
a tu peux y aller a outranceCode:
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<!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 } --> </style> <script> function replaceSelection(coul) { var sel, range, fragment, str; sel = window.getSelection(); var oParent = sel.getRangeAt(0).commonAncestorContainer; var mySelectionhtml = sel.getRangeAt(0).extractContents(); var Span = document.createElement("SPAN"); Span.appendChild(mySelectionhtml); Span.innerHTML = Span.outerHTML; // au cas ou on selectionne une balise shadow complete on prend le tag span de l'element en tant qu'enfant du nouveau span var str = Span.innerHTML; //recupération du string html de l'innerhtml du span var sp = Span.getElementsByTagName("*"); //collections de tout les spans et autre balises interne a Span for (var i = 0; i < sp.length; i++) { // on demarre la boucle sur TOUT!! les elements if (sp[i].tagName == "SPAN") { //si c'est un SPAN !! str = str.replace(sp[i].outerHTML, sp[i].innerHTML); // supression des span dans Span en ne gardant que l'interieur des spans } if (sp[i].innerText == "") { // si c'est une balise vide quelque soit le tagName str = str.replace(sp[i].outerHTML, ""); // supression des balises vides cela arrive quand on a une selection entiere le dom reproduit la balise de debut a la fin } } if (coul != false) { Span.style.textShadow = "0px 0px 10px " + coul; // si coul une couleur alors shadow } else { Span.id = "sp"; Span.style.textShadow = "none"; //sinon NONE !!! } //str = str.replace(/"<\/strong><strong>"/g, ""); ////RESTE A REGLER CES DEUX SOUCIS // str = str.replace(/"<\/em><em>"/g, ""); Span.innerHTML = str; //on replace le code néttoyé dans le nouveau SPAN document.getElementById('innernewnode').value = " code de newnode :" + Span.outerHTML; if (sel.getRangeAt && sel.rangeCount) { range = sel.getRangeAt(0); range.deleteContents(); // on delete le range complet range.insertNode(Span); //on insert dans le range le new span que l'on a nétoyé sel.removeAllRanges(); //on peut carrément supprimer le range sel.addRange(range); // et y ajouter notre range tout propre } //dernier nettoyage du parent container cette fois (pas utile tout le temps) var sp = oParent.getElementsByTagName("*"); for (var i = 0; i < sp.length; i++) { if (sp[i].innerText == "") { sp[i].parentElement.removeChild(sp[i]); } else { if (sp[i].innerText == " ") { sp[i].parentElement.replaceChild(sp[i], " "); } } } if (document.getElementById("sp")) { var N = false; var spn = document.getElementById("sp"); var par = document.getElementById("sp"); do { par = par.parentElement; if (par.tagName == "SPAN") { N = true; }; } while (par.tagName != "P"); if (N == false) { alert("pas none"); par.innerHTML = par.innerHTML.replace(spn.outerHTML, spn.innerHTML); } spn.removeAttribute("id"); } //par.innerHTML = par.innerHTML.replace(/"<\/strong\>\<strong\>"/gi, ""); //par.innerHTML = par.innerHTML.replace(/"</em><em>"/gi, ""); document.getElementById('res').value = document.getElementById('comment').outerHTML; } </script> </head> <body> <div id="comment" class="comment" contenteditable> <p> <font size="5">teste de <span style='text-shadow: 0px 0px 10px red;'><strong>te</strong></span><span style="text-shadow: 0px 0px 10px blue;"><font color="red"><strong><em>xt</em>e</strong></font></span> shadow</font> </p> </div> <input type="button" value="backblue" onclick="replaceSelection('blue')" /> <input type="button" value="backgreen" onclick="replaceSelection('green')" /> <input type="button" value="backRED" onclick="replaceSelection('red')" /> <input type="button" value="backmagenta" onclick="replaceSelection('magenta')" /> <input type="button" value="none" onclick="replaceSelection(false)" /> <input type="button" id="html" value="coupe" onclick="coupe()" /> <input type="button" id="html" value="HTML" onclick="alert(document.getElementById('comment').innerHTML)" /> </br> <textarea id="res" rows="15" cols="100"> </textarea> <textarea id="innernewnode" rows="15" cols="100"> </textarea> </body> </html>
attention quand tu prend un espace avec le mot devant ou après quand tu reprends le mot mais sans l'espace tu a un shadow avec l'espace qui reste bien evidemment
Ok je crois savoir pourquoi... C'est je crois parce qu'on perd les références de certaines span... Voir ce que disait Loralina...Citation:
Envoyé par patricktoulon
Ah ben tant mieux c'est toujours ça de gagner...Citation:
Envoyé par patricktoulon
Ok je vais voir ça...Citation:
Envoyé par patricktoulon
A ce propos j'ai vu ton autre fil, je vais y intervenir...Citation:
Envoyé par patricktoulon
Continuons ici...
Comme je disais ici : #37 : "J'ai voulu tester ici : http://jsbin.com/tosinefexe/edit?html,output mais pour l'instant cela ne fonctionne pas chez moi...".
A mon avis dans un premier temps, tu pourrais laisser de coté la sauvegarde et la restitution des éventuels backgroundColor de l'utilisateur et te concentrer sur le shadow et si cela fonctionne bien tu ajoutes la sauvegarde et la restitution des éventuels backgroundColor...
re bonjour beguinner
tiens avant de faire celle pour la sauvegarde des backg j'avais fait celle la qui fonctionne parfaitement bien
essaie de sélectionner tout ce qui est en couleur et clique "none" si ca c'est pas du récurage de ménage de fou je mange mon clavier
elle gere le shadow couleur /none/ou rien du tout(innerHTML)
belle entourloupepette non?
et pour le coup ayant compris ce que faisait execComand je fait la même chose sans entourloupetteCode:
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<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 sel = window.getSelection(); var parent = sel.getRangeAt(0).commonAncestorContainer; var mySelectionhtml = sel.getRangeAt(0).extractContents(); var Nfont = document.createElement("FONT"); Nfont.appendChild(mySelectionhtml); var sp = Nfont.getElementsByTagName("FONT"); if (sp.length > 0) { for (var i = 0; i < sp.length; i++) { sp[i].removeAttribute("style"); // on supprime l'attribut "style" } } var range = sel.getRangeAt(0); range.deleteContents(); var fragment = range.createContextualFragment(Nfont.innerHTML); //on créé un fragment pour ne pas ajouter une balise on ajoute donc le innerhtml propre range.insertNode(fragment); sel.removeAllRanges(); //on peut carrément supprimer le range sel.addRange(range); // et y ajouter notre range tout propre document.execCommand("Backcolor", true, "white"); var parent = sel.getRangeAt(0).commonAncestorContainer; alert("parent : " + parent.outerHTML); var sp = parent.getElementsByTagName("FONT"); for (var i = 0; i < sp.length; i++) { if (sp[i].style.backgroundColor == "white") { var newfont = sp[i]; sp[i].removeAttribute("style"); } } if (MOD != null) { newfont.style.textShadow = "0px 0px 10px " + coul; } if (MOD == null) { var par = newfont; var no = false; do { par = par.parentElement; if (par.style.textShadow != "") { newfont.style.textShadow = "none"; no = true; } } while (par.tagName != "P"); } if (MOD == null && no == false) { newfont.outerHTML = newfont.innerHTML; } alert(newfont.outerHTML); document.getElementById('res').value = document.getElementById('comment').outerHTML; } function coupe() { document.execCommand("cut"); } </script> </head> <body> <div id="comment" class="comment" contenteditable> <p> du texte tout seul enfant direct du div </p> <p align=""> <font size="5">teste <font style="text-shadow: 0px 0px 10px blue;"> de</font> <font style="text-shadow: 0px 0px 10px red;">texte</font> <font style="text-shadow: 0px 0px 10px green;">shad</font> <font style="text-shadow: 0px 0px 10px red;">ow</font> pour testes</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)" /> <input type="button" value="NONE" onclick="backcol(false,null)" /> <input type="button" id="html" value="coupe" onclick="coupe()" /> <input type="button" id="html" value="HTML" onclick="alert(document.getElementById('comment').innerHTML)" /> </br> <textarea id="res" rows="15" cols="100"> </textarea> </body>
le principe est simple
on sélectionne
on supprime les shadow existants a l’intérieur de la selection
on normalise( ca supprime les font qui n'ont pas d'attributs et les remplace par le innerhtml)( je le fait en string visiblement normalise() marche pas avec IE)
on applique le nouveau shadow
suppression des balises vide apres quelques changemant successif
dans les deux il reste pour parfaire le system la gestion des background reels et les strong et em successif a merger dans le nettoyage
version sans entourloupette:
on peut même reprendre le même principe et le refaire avec les span pour la compatibilité chromeCode:
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<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 sel = window.getSelection(); var parent = sel.getRangeAt(0).commonAncestorContainer; if(parent=="[object Text]"){parent=parent.parentNode;} var mySelectionhtml = sel.getRangeAt(0).extractContents(); var Nfont = document.createElement("FONT"); Nfont.appendChild(mySelectionhtml); var str=Nfont.innerHTML; var sp = Nfont.getElementsByTagName("FONT"); for (var i =0;i<sp.length; i++) { if( sp[i].getAttribute("style")!=null){ str=str.replace(sp[i].outerHTML,sp[i].innerHTML);} } Nfont.innerHTML=str; if( MOD!=null){ Nfont.style.textShadow="0px 0px 10px "+coul;} if( MOD==null){ Nfont.style.textShadow="none";} var range = sel.getRangeAt(0); range.deleteContents(); range.insertNode(Nfont); sel.removeAllRanges(); //on peut carrément supprimer le range sel.addRange(range); // et y ajouter notre range tout propre var no=false var par=Nfont do{par=par.parentElement;if(par.getAttribute("style")!=null){ no=true;}}while(par.tagName!="P"); if(no==false && MOD==null){Nfont.outerHTML=Nfont.innerHTML;} //apres quelques changement on a des balises vides on nettoie var sp = parent.getElementsByTagName("*"); for (var i =0;i<sp.length; i++) { if(sp[i].innerText==""){sp[i].parentElement.removeChild(sp[i]);} //dans certains cas reste encore du nettoyage a faire ici!! } document.getElementById('res').value = document.getElementById('comment').outerHTML; } function coupe() { document.execCommand("cut"); } </script> </head> <body> <div id="comment" class="comment" contenteditable> <p> du texte tout seul enfant direct du div </p> <p align=""> <font size="5">teste <font style="text-shadow: 0px 0px 10px blue;"> de</font> <font style="text-shadow: 0px 0px 10px red;">texte</font> <font style="text-shadow: 0px 0px 10px green;">shad</font><font style="text-shadow: 0px 0px 10px red;">ow</font> pour testes</font> </p> <p > <font size="7"> E<font color="#ff0000">XE</font><strong><em>MP</em></strong>LE DE TEXTE</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)" /> <input type="button" value="NONE" onclick="backcol(false,null)" /> <input type="button" id="html" value="coupe" onclick="coupe()" /> <input type="button" id="html" value="HTML" onclick="alert(document.getElementById('comment').innerHTML)" /> </br> <textarea id="res" rows="15" cols="100"> </textarea> </body>
le nombre de lignes commence sérieusement a diminuer j'aime beaucoup les codes qui sont concis
re
alors j'ai vraiment besoins de tous car la je n'y pige plus rien
vous allez me dire allez qu'est ce qu'il a encore celui la avec sa fonction shadow :ptdr:
ben en fait j'ai rien elle marche a la perfection !!!:oops:
vous allez me dire
et donc?????
ben je vais vous repondre qu'elle ne devrait pas :ptdr::ptdr:
allons donc qu'est ce que c'est cette histoire encore
et bien dans la version same entourloupete donc sans execcommand j'ai enfin ajouté la gestion des background tout du moins commencé
cela consiste a repérer dans la sélection les fonts qui ont un style backgroundColor en leur ajoutant pour les distinguer plus tard un attribut "back"
jusque la rien de bien compliqué
je fait cet ajout d'attribut parce que la fonction pour faire le shadow supprime littéralement l'attribut "style" avant d'en appliquer le nouveau
donc mon probleme est que
je fait cet ajout d'attribut "back"
et la fonction devrait supprimer le backgroundColor puisqu'il est dans l'attribut style
et je vous le donne dans le mille le background n'est pas supprimé
c'est bien la première fois que je ne suis pas obligé de batailler avec JS
examinez bien la boucle sur les font apres la selection et expliquez moi ce phénomène si tant est qu'il soit explicable :mouarf:
le code en entier :
Code:
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<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 sel = window.getSelection(); var parent = sel.getRangeAt(0).commonAncestorContainer; if(parent=="[object Text]"){parent=parent.parentNode;} var mySelectionhtml = sel.getRangeAt(0).extractContents(); var Nfont = document.createElement("FONT"); Nfont.appendChild(mySelectionhtml); var str=Nfont.innerHTML; var sp = Nfont.getElementsByTagName("FONT"); for (var i =0;i<sp.length; i++) { if (sp[i].style.backgroundColor!=""){sp[i].setAttribute("back",sp[i].style.backgroundColor);} if( sp[i].getAttribute("style")!=null){ str=str.replace(sp[i].outerHTML,sp[i].innerHTML);} } Nfont.innerHTML=str; if( MOD!=null){ Nfont.style.textShadow="0px 0px 10px "+coul;} if( MOD==null){ Nfont.style.textShadow="none";} var range = sel.getRangeAt(0); range.deleteContents(); range.insertNode(Nfont); sel.removeAllRanges(); //on peut carrément supprimer le range sel.addRange(range); // et y ajouter notre range tout propre var no=false var par=Nfont do{par=par.parentElement;if(par.getAttribute("style")!=null){ no=true;}}while(par.tagName!="P"); if(no==false && MOD==null){Nfont.outerHTML=Nfont.innerHTML;} //apres quelques changement on a des balises vides on nettoie var sp = parent.getElementsByTagName("*"); for (var i =0;i<sp.length; i++) { if(sp[i].innerText==""){sp[i].parentElement.removeChild(sp[i]);} } document.getElementById('res').value = document.getElementById('comment').outerHTML; } function coupe() { document.execCommand("cut"); } </script> </head> <body> <div id="comment" class="comment" contenteditable> <p> du texte <font style="background-color: yellow;">tout</font> seul <font style="background-color: rgb(0, 255, 0);"> enfant</font> direct du div </p> <p align=""><font size="5">teste <font style="text-shadow: 0px 0px 10px blue;"> de</font> <font style="text-shadow: 0px 0px 10px red;">texte</font> <font style="text-shadow: 0px 0px 10px green;">shad</font><font style="text-shadow: 0px 0px 10px red;">ow</font> pour testes</font> </p> <p> <font size="7"> E<font color="#ff0000">XE</font><strong><em>MP</em></strong>LE DE TEXTE</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)" /> <input type="button" value="NONE" onclick="backcol(false,null)" /> <input type="button" id="html" value="coupe" onclick="coupe()" /> <input type="button" id="html" value="HTML" onclick="alert(document.getElementById('comment').innerHTML)" /> </br> <textarea id="res" rows="15" cols="100"> </textarea> </body>
Quelle version veux-tu qu'on teste finalement ? Celle du dernier message (le 98) ?
oui la derniere
bien que les 3 fonctionnent
mais la dernière gère les background
je te jure c'est un truc de fou elle marche elle me garde les background elle fait son boulot pour le shadow
alors que finalement en appliquant le shadow elle devrait perdre les background :ptdr::ptdr:
Oui oui je pense que c'est explicable... Il n'y a pas de suppression car l'instruction str = str.replace(sp[i].outerHTML, sp[i].innerHTML); ne fait plus son job, on tombe là sur un des inconvénients qu'il y a à travailler avec des string...Citation:
Envoyé par patricktoulon
Alors pourquoi elle ne fait plus son job ? Regarde cette partie du code :
Tu vois en ajoutant l'attribut "back" tu modifies le outerHTML sans rafraichir la string "str" qui contient l'ancien outerHTML (c'est-à-dire sans l'attribut "back") donc quand tu fais : str = str.replace(sp[i].outerHTML, sp[i].innerHTML); il n'y a aucun remplacement qui s'effectue car le outerHtml qui est cherché est celui qui a été modifié et qui par conséquent ne se trouve pas dans la string "str"...Code:
2
3
4
5
6
7
8
9
10
11
---> En plus il me semble qu'avec cette boucle for tu supprimes tous les formatages (sauf le backgroundColor) utilisant un "style" avec la balise <font>...
j'en étais sur que tu allais tomber dans le panneau
en effet je travaille sur le str(string original de la selection) donc le attribut back n'est pas mis en place puisque nfont innerhtml=str tout de suite après
mais alors explique moi pourquoi les background ne sautent pas hein car dans le str ils y sont et dans l'attribut style qui est sensé etre supprimé
d'autant plus que quand on teste avec des shadow et!!!!! des background seuls les shadows sont supprimé
et la il n'y a aucune raison car le teste se fait non pas le outerhtml mais seulement sur la présence de l'attribut "style"
et puisqu'on y est essaie de bloquer la ligne de l'attribution des attribut "back " et regarde le résultat
allez dis moi ou est la logique
j'ai penser a une erreur non bloquante que l'on voit que quand on est en mode console dans IE mais ce n'est pas le cas j'ai vérifié
je pense avoir trouvé la reponse mais je te laisse cherché un peu pour une fois
je te préviens la réponse est complètement con
je te donne un indice "ordre" et le ";"
mais cela reste sans logique
Tu es sûr que je suis tombé dans le panneau ?Citation:
Envoyé par patricktoulon
Ben oui j'avais compris c'est même ce que je t'ai dit et c'est la cause du problème d'ailleurs... Relis ce passage :Citation:
Envoyé par patricktoulon
"Tu vois en ajoutant l'attribut "back" tu modifies le outerHTML sans rafraichir la string "str" qui contient l'ancien outerHTML (c'est-à-dire sans l'attribut "back")..."
Il n'y a aucune raison que les backgroundColor "sautent" comme tu dis puisque tu ne les supprimes pas comme je te l'ai expliqué...Citation:
Envoyé par patricktoulon
Ou vois-tu que l'attribut style est supprimé ?
oulah
ok j'ai pigé espece d'abr... que je suis
str=str.replace(sp[i].outerHTML,sp[i].innerHTML)
sp[i].outerHTML dans le dom et str sont différent apres le "back" donc le replace walouh walouh!!!! puisqu'il trouve pas la chaine correspondante dans str
des coup de trique ouais je mérite
par contre ce qui est étonnant c'est que quant tu prends le mot qui est en background jaune par exemple et que tu lui applique un shadow c'est ok
et que quand tu reviens dessus et que tu rechange le shadow il garde encore le background la par contre y a plus de méprises str ou pas str
Je vais te donner un exemple pour être plus clair...Citation:
Envoyé par Beginner.
Dans ton code on a entre autres ce paragraphe :Code:
2
3
4
Si tu selectionnes "texte seul" alors on a la string str qui vaut :
Code:
2" texte <font style="background-color: yellow;">tout</font> seul"
Après tu ajoutes l'attribut "back" à la balise <font style="background-color: yellow;"> du Nfont.innerHTML (et non de la string str qui reste inchangée).
On se retrouve avec ça : <font style="background-color: yellow;" back="yellow">tout</font> (c'est le contenu de sp[i].outerHTML avec dans ce cas i = 0)
Ensuite on a l'instruction str = str.replace(sp[i].outerHTML, sp[i].innerHTML); qui ne fait plus son job, il ny a aucun remplacement car elle cherche dans la string str la string sp[i].outerHTML qui vaut comme on la vu ceci : <font style="background-color: yellow;" back="yellow">tout</font>Or cette chaine ne se trouve pas dans la string str (à cause de la présence du back="yellow" qui a été ajouté entre temps) !!! Donc il n'y a pas de remplacement...
oui beguinner j'ai compris ma méprise mais pour le 2 eme changement ton raisonnement n'est plus valable
car dans str l'attribut "back" y est!!!! puisque je re sélectionne et que le dom a été deja changé avant
et même si je l'a joute ca change rien( fait rien du tout) puisque dans le dom et dans str il y est déjà
donc au 2 ou x eme changement la chaines p[i].outerhtml est bien présente dans str
ca y est j'ai trouvé
c'est encore une meprise de ma part entre ce que je vois a l'ecran et ce qui est vrament
en fait la 2 et x fois la reselection prend le contenu!!!! de l'ancien shadow et donc le couleur est bonne mais dans le code j'ai
<font shadow x> <font shadow y ><font shadow z >truc bidule </font> </font> </font>
shadow z etnt le dernier shadow appliqué
je vais donc revoir le principe
j'ai trouvé un autre moyen qui a l'air de me le rendre propre ce code
Nos messages se sont croisés, oui c'est ça tu as compris et il suffirait éventuellement de rafraichir la str...Citation:
Envoyé par patricktoulon
Il y a aussi la solution de NoSmoking, certes on avait vu qu'il y avait un problème mais comme je disais je pense que cela doit pouvoir se régler... J'ai d'ailleurs trouvé la cause du problème...Citation:
Envoyé par patricktoulon
Au risque de me répéter, je trouve difficile de suivre tes discussions ...
Le code donné est à prendre plus comme un fil conducteur et non comme un code clé en main et comme précisé des dysfonctionnement peuvent exister :aie:Citation:
Envoyé par patricktoulon
A l'occasion j'y regarderais peut être.
Un code très instructif contenant plusieurs fonctions utiles... Je continue de l'étudier quand j'en ai l’occasion...Citation:
Envoyé par NoSmoking
C'est je pense la fonction cleanInlineStyleNode(node, top) qu'il faudrait modifier... Le problème c'est qu'elle vérifie tous les parents pour voir si l'un d'eux a un shadow identique à celui qu'on vient d'appliquer et si c'est le cas il supprime ce dernier... Or je pense qu'il faudrait se limiter au premier parent ayant un shadow pour savoir si on supprime ou non le shadow en cours (qui vient d'être appliqué)...Citation:
Envoyé par NoSmoking
Pourquoi ? Car par exemple si je met un shadow black à un texte A puis je change et met un shadow green (sur tout ou une partie du texte A) on se retrouve avec deux shadow imbriqués.
Mais je peux vouloir ensuite mettre encore du shadow black sur tout ou une partie du texte A (ayant un shadow green) et là il ne le fait pas. Pourquoi ? Parce que :
1- il vérifie le premier parent et il trouve un shadow green, comme les couleurs sont différentes il ne supprime pas le shadow black en cours (qui vient d'être appliqué)...
Si on en restait là eh bien on aurait notre shadow black mais on continue et vérifie le parent au dessus et là on trouve un shadow de couleur black, la couleur est identique donc il supprime le shadow black qui vient d'être appliqué chose qu'on ne veut pas.
---> En somme je pense qu'on pourrait éviter ce problème en limitant le test au premier parent ayant un shadow...
Je ne sais pas si je suis clair... Ce n'est pas évident à expliquer...
*************************
Après si on fait ça on se retrouvera je pense avec un autre problème... Ci-dessus je disais : "...sur tout ou une partie du texte..." alors "sur une partie" je pense qu'il n'y a pas de problème mais dans le cas où on applique plusieurs fois un shadow (de sorte que la couleur de deux shadow consécutifs soient différentes) sur le même texte on va à chaque fois insérer un shadow qui ne sera plus supprimé... On peut alors se retrouver avec plein de shadow imbriqués sur le même texte (il pourrait même y avoir plusieurs shadow de la même couleur mais ils ne seront pas consécutifs...).
Il faudrait donc ajouter un test : si le texte sélectionné a déjà un shadow appliqué uniquement à lui (uniquement ---> c'est-à-dire ce shadow ne doit pas être appliqué a un éventuel texte à gauche et/ou à droite du texte sélectionné, je pense cependant qu'il faudrait ignorer les espaces) alors dans ce cas :
- Si le shadow déjà appliqué est identique à celui qu'on veut appliquer alors on ne fait rien...
- Si le shadow déjà appliqué est différent à celui qu'on veut appliquer alors soit on change la couleur du shadow déjà appliqué pour mettre à la place la couleur du shadow qu'on veut appliquer. Soit on supprime le shadow déjà appliqué et on met à la place le nouveau shadow... Je ne sais pas lequel est le meilleur...
Voilà je ne sais pas si je suis clair... Ce n'est pas évident à expliquer...
re
beguinner pour le problème de l'exemple de noSmoking c'est exactement pour ca que j'essaie de gérer les 3 position
shado couleur/shado none / rien (innerhtml remplace outerhtml)
sinon dans le model de noSmoking se sera interminable vu le nombre de possibilité d'autant plus que la tu parle que pour la couleur pour le suppression il faudra faire pareil
mes 4 models rendent un code qui montre un résultat visuel impec le plus simple étant celui avec les span au lieu de font
il reste simplement dans une ou plusieurs boucles
a supprimer les vides (deja réglé)
merger les span successifs ou qui éventuellement auraient le même shado
je dit bien successif car il ne peut en aucun cas avoir par exemple un shadow black dans un shadow black le principe même de ma fonction rendant cela impossible
merger les font background successifs qui auraient éventuellement été séparés lors de précédentes application de shadow
voila ces trois problème réglés le shadow sera parfait
je te met la version span au propre et je reviens
voila version span propre et indenté
Code:
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<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 sel = window.getSelection(); var parent = sel.getRangeAt(0).commonAncestorContainer; if (parent == "[object Text]") { parent = parent.parentNode; } var mySelectionhtml = sel.getRangeAt(0).extractContents(); var oSpan = document.createElement("SPAN"); oSpan.appendChild(mySelectionhtml); var str = oSpan.innerHTML; var sp = oSpan.getElementsByTagName("SPAN"); for (var i = 0; i < sp.length; i++) { str = str.replace(sp[i].outerHTML, sp[i].innerHTML); } oSpan.innerHTML = str; var range = sel.getRangeAt(0); range.deleteContents(); range.insertNode(oSpan); sel.removeAllRanges(); //on peut carrément supprimer le range sel.addRange(range); // et y ajouter notre range tout propre if (MOD != null) { oSpan.style.textShadow = "0px 0px 10px " + coul; } if (MOD == null) { oSpan.style.textShadow = "none"; } //////////////gestion du shadow couleur /none /ou innerHTML////////////// var no = false var noC=false var par = oSpan 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"); if (no == false && MOD == null) { oSpan.outerHTML = oSpan.innerHTML; } if (noC ==true && MOD != null) { oSpan.outerHTML = oSpan.innerHTML; } /////////////////////////////////////////////////////////// ///////////////apres quelques changement on a des balises vides on nettoie ///////// var sp = par.getElementsByTagName("*"); for (var i = 0; i < sp.length; i++) { if (sp[i].innerText == "") { sp[i].parentElement.removeChild(sp[i]); } } //////////////////////////////////////////////////////////////////// //////////////////////////////////merge same///////////////////// // // //ICI ON DOIT FAIRE LES MERGES // // // ////////////////////////////////////////////////////////////////////// document.getElementById('res').value = document.getElementById('comment').outerHTML; } </script> </head> <body> <div id="comment" class="comment" contenteditable> <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 <font style="text-shadow: 0px 0px 10px blue;"> de</font> <font style="text-shadow: 0px 0px 10px red;">texte</font><font style="text-shadow: 0px 0px 10px green;">shad</font><font style="text-shadow: 0px 0px 10px red;">ow</font> pour testes</font> </p> <p> <font size="7"> E<font color="#ff0000">XE</font><strong><em>MP</em></strong>LE DE TEXTE</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)" /> <input type="button" value="NONE" onclick="backcol(false,null)" /> </br> <textarea id="res" rows="15" cols="100"> </textarea> </body>
Ah oui j'oubliais... Pour tenir compte de certains cas, il vaudrait mieux dans les deux points ci-dessus supprimer tous les éventuels shadow internes à la sélection...Citation:
Envoyé par Beginner.
regarde le poste 113
Ok à tester alors...Citation:
Envoyé par patricktoulon
oh tu peux y aller avec acharnement j'ai pas réussi a la planter
je suis aller jusqu'a une couleur par lettre
les deux seuls soucis sont les successif qui ont été précédemment séparé
j'ai merder un peu
je t'ai mis le code HTML DE LA VERSION ENTOURLOPETE AVEC LES FONT ET EXECCOMMAND
c'est ca le bonCode:
2
3
4
5
6
7
8
9
10
11
Ouais effectivement l'autre ne fonctionne pas...
Ah mais dans le "bon" y a pas grand chose... ???
