Discussion :

[patricktoulon]

c'est pas grave je te dis
je le fait avec un mot déjà les espaces au départ n'apartienne pas au même child et ca match
c'est le principe de execcommand je nettoie tout au départ

il me faut le roueG le milieu le rouge D c'est tout
je ne peut pas être plus clair tu veux la démo en image si tu me crois pas ???

[Beginner.]

il me manque la boucle a reculons sur tx et c'est bon aide moi pour ca

Ok mais rajoute moi un exemple concret pour tx car dans le code tu n'as pas fixé tx...

[patricktoulon]

voila un exemple simple j'ai bombarder les  

Code :

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

<font size="4">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; EXEMPLE&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <font style="background-color: rgb(255, 0, 0);">DE</font> <font color="#0000ff">TEXTE</font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;POUR BEGUINNER&nbsp;&nbsp;&nbsp;&nbsp;</font>

donc je vveux exemple e texte pour beguinner avec ses espacement au milieur dans variable M
et la gauche dans esG et la droite et esD

regarde bien la demo avec un seul mot et 36 espaces devant et 36 espace deriere

[patricktoulon]

bon il faudrait peu être aller reposer les yeux 3 heure du mat je vais encore en croix tomorro au boulot

[Beginner.]

Trop tard j'ai pris un exemple qu'on peut modifier de toute façon, tu peux tester ici : http://jsbin.com/goyayeteve/edit?js,console,output

J'ai repris ton code et j'ai corrigé ce qui n'allait pas...

[Beginner.]

Ah je viens de m'apercevoir qu'avec ta boucle qui commence par la fin la partie droite est inversée... Je crois qu'on peut le re-inverser mais bon je vais voir si on peut optimiser le tout avec les regex...

[Beginner.]

Voila avec les regex (c'est plus concis) : http://jsbin.com/filuriwiqa/1/edit?h...console,output

Tu peux tester en modifiant le contenu du paragraphe, la console se ré-actualise automatiquement...

[patricktoulon]

oui sur le jsbin ca marche mais chez moij non

ca marche en innerText mais pas en innerHTML

c'est normal en innerHTML les espaces sont des chaine " "mais il me les faut en innerhtml car en innertext ca donne des espaces mais ca peut être des  


c'est la ou a la difficulté en fait
on peut faire ca avec le regex tu crois ?

re bon j'ai essayé avec les nbsp; et on retombe bien dans le regroupement d'espace donc un résultat faux

Code :

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

1
2
3
4
5
6
7
8
9
10
var tx=oSpan.innerHTML;
var G = tx.match(/^\&nbsp\;/g)[0].length ;
var D = tx.match(/\&nbsp\;/g)[0].length ;
alert(G-D);// faux donne 0 forcement par le regroupement 
var esG = tx.substring(0,G) ;
var M   = tx.substring(G,tx.length-D) ;
var esD = tx.substring(tx.length-D) ;
alert("gauche:"+esG+":");
alert("milieu:"+M+":");
alert("droite:"+esD+":");

pour que les chose soit claires
pour les espaces je veux pas obtenir
gauche=" "
milieu=" balblablabla"
droite=" "

je veux bien la chaîne innerHTML que représente la chaîne des espaces que l'on voit(pas)

soit pour la gauche "    "
etc.....
comprends tu la difficulté de la chose

[Beginner.]

comprends tu la difficulté de la chose

Tu plaisantes là ? Je te rappelle que c'est toi qui disait que cela n'était si compliqué alors que je te répétais que ce n'était si simple...

c'est normal en innerHTML les espaces sont des chaine " "mais il me les faut en innerhtml car en innertext ca donne des espaces mais ca peut être des  

Si tu travailles avec le innerHTML tu auras des balises dont il faut tenir compte ce qui complique les chose et je rappelle encore fois que les espaces peuvent appartenir à différentes balises... Revois les messages #31 et #33.

Ce n'est pas pour rien que NoSmoking a développé des fonctions spéciales alors certes le code est plus long mais avec un code plus concis auquel tu tiens on n'obtient pas le bon résultat...

re bon j'ai essayé avec les nbsp; et on retombe bien dans le regroupement d'espace donc un résultat faux

Tu es têtu quand même, hein ? Je te répète encore une fois qu'avec le css tu peux éviter ce caractère...

on peut faire ca avec le regex tu crois ?

Je pense que c'est possible avec ou sans c'est juste qu'il faut réfléchir un peu...

[Beginner.]

pour que les chose soit claires
pour les espaces je veux pas obtenir
gauche=" "
milieu=" balblablabla"
droite=" "

Non tu obtiens exactement le nombre d'espaces qu'il y a, après si tu veux éviter la fusion des espaces tu peux remplacer ces espaces par des   ...

[patricktoulon]

non le principe est simple je le fait en VB?VBA avec split et instr
c'est la facon dont marchent les outils JS qui le rende compliqué
en VB quand je récupère le innerhtml et que je split je n'ai pas de regroupement
sil il y a 36 " " il y en a 36 a la sortie
et puis le fait est que l'on c'est pas compris
tu travaille sur textContents qui visiblement donne le innerText parti de la oui tu a tes espace mais pas le code
alors on pourrait dire bon ben on a le nombre on l'ecrit n nombre sauf que dans le code (innerHTML) les espace interne sont des espaces " " et les externes sont des " "

mais bon si c'est pas possible en JS on laisse tomber c'est pas grave

de toute façon j'ai tout essayé et même avec des caractères classique il me regroupe partie de la oui c'est compliqué
avec le parcours d'un split j'arrive a avoir la gauche intact mais la boucle a reculons pour la droite plante

tu t' inquiète pour ces espaces qui serait éventuellement dans d'autre balise moi je te dis non pas d’inquiétude le nettoyage et replacement de ces espaces ont déjà été traités en amont

je vais chercher ma solution pour la droite si je trouve je le mettrais si je trouve pas ben tant pis le wyg restera VB

AH!! ET AU FAIT
LE DIV CONTENT EDITABLE est depuis deux jour déjà en white-space:pre dans son css ( ca change rien )

le fait est que tu le sait peu etre pas un div editable perd quelque propriété a cause du scope et aussi de son accessibilité par le css c'est peut être aussi pour ça que ca match pas
je te parle même pas de ces événements propres

[Beginner.]

et puis le fait est que l'on c'est pas compris
tu travaille sur textContents qui visiblement donne le innerText parti de la oui tu a tes espace mais pas le code
alors on pourrait dire bon ben on a le nombre on l'ecrit n nombre sauf que dans le code (innerHTML) les espace interne sont des espaces " " et les externes sont des " "

mais bon si c'est pas possible en JS on laisse tomber c'est pas grave

Mais si c'est possible, c'est simple à partir d'une string mais c'est dommage car tu peux travailler avec les espaces et après si tu veux éviter la fusion des espaces tu peux remplacer ces espaces par des   ...

[Beginner.]

Bon je vais le faire en corrigeant ton code comme ça tu auras quelque chose de similaire au VB...

[patricktoulon]

Mais si c'est possible, c'est simple à partir d'une string mais c'est dommage car tu peux travailler avec les espaces et après si tu veux éviter la fusion des espaces tu peux remplacer ces espaces par des   ...

comme je te l'ai dis j'ai fait mieux j'ai remplacer le" " par un caractères classique
dans la boucle il les sort
dans la compil il sont divisé par 2 et la on ne peut plus dire que c'est a cause des caractères spéciaux on est d'accords puisqu'il n'y en a plus dans tx

[patricktoulon]

en vb le shema est simple
etape 1 on replace les "&nbsp"par un caractere que l'on est sur de ne pas avoir dans le code hein c'est evident
en VB:tx=replace(tx," ","|")

en js:tx=tx.replace(" ","|")
etapa 2
on boucle du debut tant que l'on a le "|" ou!!!!!!" " (un espace simple)
voila parti de la on a le milieu et la droite ensemble
maintant on fait un reverse ( c'est a dire on met le texte a l'envers (verlant)
et on fait la meme boucle
on a maintenant le milieu mais a l'envers
et bien on refait un reverse sur le milieu
et voila
on a notre milieu
maintenant un split sur le tx original avec milieu
l'item 0 sera la gauche
l'item 1 c'est bien sur le milieu
l'item 2 c'est la droite

voila voila
bien sur j'oubliais on fait les replace sur le 3 du"|" par"&nbsp"

[Beginner.]

Essaye ça : http://jsbin.com/fiqosizibo/edit?html,js,console,output

[patricktoulon]

c'est absolument gééééééééééénnnniiiiaaaalllllllll you ARE THE KING

j'adapte a mon contexte et je reviens j'avais tout jetté du coup de colère il faut que je réécrive le code j'ai tout de mémoire
a toute

[patricktoulon]

regarde c'est tout




qui a dit que ca marcherait pas
qui s’inquiète des espaces dans balises différentes
et patata patati
chez moi les choses sont simple (1,2,3) point barre

reste quand même les successif rapatriés (de même tag et meme attribut) et la fonction comme tu a pu le constater elle se comporte comme execcomand et elle garde la sélection

tiens :

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
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
222
223
<!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 backcol(coul, MOD) {
    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).extractContents();
    var oSpan = document.createElement("SPAN");
    oSpan.appendChild(mySelecthtml);
 
 
    var B = oSpan.getElementsByTagName("*")
    var str = oSpan.innerHTML;
    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].innerText == "" && B[i].tagName != "IMG") {
            str = str.replace(B[i].outerHTML, "");
        }
    }
    ////////////////////////////////////////////////
    var tx = str;
    console.log(tx);
    var tx = tx.replace(/&nbsp\;/gi, "*");
 
 
 
 
    var G;
    for (G = 0; G < tx.length; G++) {
 
 
        if (tx[G] == "*" || tx[G] == " ") continue;
        else break;
    }
    var D;
    for (var D = tx.length - 1; D > 0; D--) {
        if (tx[D] == "*" || tx[D] == " ") continue;
        else break;
    }
    var espG = tx.substring(0, G).replace(/\*/gi, "&nbsp\;");
    var midle = tx.substring(G, D + 1).replace(/\*/gi, "&nbsp\;");
    var espD = tx.substring(D + 1).replace(/\*/gi, "&nbsp\;");
    oSpan.innerHTML = midle;
    //alert (oSpan.outerHTML);
    var range = sel.getRangeAt(0)
    range.deleteContents(); // on delete le range complet 
    if (range.createContextualFragment) {
        fragment = range.createContextualFragment(espG + oSpan.outerHTML + espD); //on créé un fragment avec espG ,oSpan et espD
    }
 
 
    var fL = fragment.childNodes.length;
    for (var L = 0; L < fL; L++) {
        if (fragment.childNodes[L].tagName == "SPAN") {
            var indC = L;
        } /// on  REPERE oSpan DANS LE FRAGMENT 
    }
    var firstInsertedNode = fragment.childNodes[indC]; //on determine le debut du fragment AVEC OSPAN
    var lastInsertedNode = fragment.childNodes[indC]; //on determine fin  du fragment AVEC OSPAN
 
 
    if (fragment.firstChild.innerHTML == "undefined") { //AU CAS OU SE SERAIT JUSTE UN TEXTNODE 
        var firstInsertedNode = fragment.firstChild; //on determine le debut du fragment
        var lastInsertedNode = fragment.lastChild; //on determine fin  du fragment
    }
 
 
    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 
 
 
    // en utilisant les fragments ci dessus je n'ai plus la main mise sur oSpan Alors......
    //pour garder la main mise sur oSpan pour le reste de, la fonction  (shadow) maintenant que le texte est bien ciblé on réinsere ospan en tant que range complet 
    //ainsi on a la possibilité de faire ce que l'on veut sur lui  jusqu'a la fin de la fonction   
    var range = sel.getRangeAt(0)
    range.deleteContents();
    range.insertNode(oSpan); // et maintenant que l'on a remis espG,ospan,espD on garde que osPan dans la selection 
    sel.removeAllRanges(); //on peut carrément supprimer le range 
    sel.addRange(range); // on garde la selection active ( ici facultatif) oSpan est bien ciblé
 
 
    //maintenant on fait ce que l'on veut sur oSpan 
    if (MOD != null) {
        oSpan.style.textShadow = "0px 0px 10px " + coul;
    }
    if (MOD == null) {
        oSpan.style.textShadow = "none";
    }
 
 
    //////////////gestion du 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;
    }
 
 
    ///////////////////////////////////////////////////////////   
    //alert(oSpan.parentElement); //la preuve 
 
 
    var sp = parent.getElementsByTagName("*");
    for (var i = 0; i < sp.length; i++) {
        if (sp[i].tagName == "SPAN" && sp[i].innerText == " ") {
            sp[i].outerHTML = "&nbsp;";
            alert(sp[i].previousSibling.outerHTML);
        }
    }
 
 
 
 
 
 
 
 
    //////////////////////////////////////////////////////////////////// 
    document.getElementById('res').value = document.getElementById('comment').outerHTML;
 
 
}
    </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="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>
<script>
document.getElementById('res').value = document.getElementById('comment').outerHTML;
</script>
</body>

[patricktoulon]

re
oui bien sur si children donne que oSpan c'est nickel
y a pas de soucis
alors que pense tu de ma méthode 1,2,3?
je vais tout séparer pour en faire une fonction universelle que je pourrais même appliquer avant execcommand
tu l'a essayé??

[Beginner.]

Je viens de vérifier, apparemment il n'y a pas la propriété children pour les fragment... Dommage...