Discussion :

[Beginner.]

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:

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

Alors pourquoi elle ne fait plus son job ? Regarde cette partie du code :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
            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;

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

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

[patricktoulon]

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

[Beginner.]

j'en étais sur que tu allais tomber dans le panneau

Tu es sûr que je suis tombé 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

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 :

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

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é

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

Ou vois-tu que l'attribut style est supprimé ?

[patricktoulon]

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

[Beginner.]

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

Alors pourquoi elle ne fait plus son job ? Regarde cette partie du code :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
            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;

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

Je vais te donner un exemple pour être plus clair...

Dans ton code on a entre autres ce paragraphe :

Code html :

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

1
2
3
4
<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>

Si tu selectionnes "texte seul" alors on a la string str qui vaut :

Code html :

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

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

[patricktoulon]

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

[patricktoulon]

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

[Beginner.]

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

Nos messages se sont croisés, oui c'est ça tu as compris et il suffirait éventuellement de rafraichir la str...

[Beginner.]

j'ai trouvé un autre moyen qui a l'air de me le rendre propre ce code

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

[NoSmoking]

Au risque de me répéter, je trouve difficile de suivre tes discussions ...

oui sauf que ca marche pas totalement ta méthode
regarde après 3 changement de couleur le nombre de spans...

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

A l'occasion j'y regarderais peut être.

[Beginner.]

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:

Un code très instructif contenant plusieurs fonctions utiles... Je continue de l'étudier quand j'en ai l’occasion...

A l'occasion j'y regarderais peut être.

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

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

[patricktoulon]

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

[patricktoulon]

voila version span propre et indenté

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

[Beginner.]

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

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

[patricktoulon]

regarde le poste 113

[Beginner.]

voila version span propre et indenté

Ok à tester alors...

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

[patricktoulon]

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 bon

Code :

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

1
2
3
4
5
6
7
8
9
10
11
  <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>
            <font size="7"> E<font color="#ff0000">XE</font><strong><em>MP</em></strong>LE DE TEXTE</font </p>

[Beginner.]

Ouais effectivement l'autre ne fonctionne pas...

[Beginner.]

Ah mais dans le "bon" y a pas grand chose... ???