Remplacement d'un élément par son innerHTML

**Beginner.** · 18/03/2017, 23h31

Il y a aussi des instructions comme range.deleteContents(); et sel.removeAllRanges(); qui ont été retirées...

**patricktoulon** · 19/03/2017, 00h39

j'ai reussi a faire sauter l'espace de devant

**NoSmoking** · 19/03/2017, 12h17

@Beginner. : concernant ton post #111
A y regarder d'un peu plus prêt, rapidement, je dirais simplement que la gestion dans la fonction est très incomplète et mal foutue ...

@patricktoulon :
Ta fonction de nettoyage est trop « light », il ne faut oublier, mais je me trompe peut être, que ta fonction fait partie d'un tout et que tu peux potentiellement insérer des images qui dans ce cas seraient immanquablement supprimées.

Ne pas oublier également que ton éditeur est prévu pour insérer/enlever des données texte ou autre. Un essai rapide en insérant du texte montre quelques dysfonctionnements.

J'aurais quand même une remarque ne concernant en rien ton code mais plus générale : penses tu nécessaire de continuer alors que les dysfonctionnements constatés ne sont somme toute pas préjudiciable et ce d'autant que si tu souhaites t'en servir pour créer des « mails » un certains nombres de styles risquent de ne pas être pris en compte.
Je te rappelles que pour info, les éditeurs que l'on peut trouvé font plusieurs milliers de lignes de code pour justement essayer de prévoir tous les cas et qu'ils sont régulièrement mis à jour.

**patricktoulon** · 19/03/2017, 12h25

Bonjour noSmoking et Beguinner

oui noSmoking je n'oublie pas mes smyleys

pour le moment on est pas dans le wysiwyg je règle un problème l'un après la'autre avant d'intégrer la fonction
je suis encore au espaces qui foutent le boxon en cas de changement multiples

j'ai trouvé une solution c'est pas conventionnel mais je bosse dessus
ayant trop de soucis avec le previoussibling et nextsibling selon la sélection ou elle se trouve et si la sélection n'est pas le seul ou le dernier ou le premier enfant j'ai abandonner cette solution avec insertbefore

et oui je pourrais me contenter de repiquer un wisywyg mais c'est moins intéressant

et surtout il faut pas oublier le support de destination hein on en a parler quelques fois
concernant le jquery et autre qui ne peuvent pas fonctionner dans l'activX

ca n'est pas pour rien que j'essaie de travailler en js pure

**patricktoulon** · 19/03/2017, 13h34

problème de l'espace de devant résolu
je fait encore mumuse avec les ranges

**patricktoulon** · 19/03/2017, 14h03

voila
le principe etant assez simple en fait

en faisant comme ca je sautre le carcan qu'est de faires 5 ou 6 test sur :
est ce que c'est le firstChild
est ce que c'est le lastChild
du coup pas besoins de previous sibling ni de nextsibling
et aussi le fait que se soit le debut de texte du parent quand le parent est"P" car même si on ne le vois pas il y a un espace et dans ce cas très précis si on l’enlève ca déraille

donc
la chose est simple

on sélectionne et appendchild au newspan on supprime l'espace de devant d'office dans le innerhtml:si il y en a un bien sur :la variable espG contient donc le string(" ")
important pour beguinner !! j'ai remis la ligne qui me garde la sélection active (sel.add(range))
on fait notre traitement shadow cela ne change pas
comme on gardé la selection active avec le code arrangé pour le shadow est sans l'espace de devant on reprend la sélection!!!
on recréé un nouveau span
on appendchild la sélection
on modifie le innerhtml de ce span en lui ajoutant un espace devant tout son innerhtml donc devant notre nouveau span shadow
on le remet dans le range(
et voila notre espace n'est plus dans le span shadow mais le nouveau span parent que l'on vient de créer
il nous reste plus qu'une chose a faire
CECI: nouveauspan.outerHTML=nouveauspan.innerHTML
la partie nouveau span etant gérée par un if sur espG==" "

vous en pensez quoi de cette méthode ?????

**Beginner.** · 20/03/2017, 10h35

Salut,

Est-ce que le but c'est toujours de modifier la sélection de sorte qu'elle ne contienne pas les éventuels espaces à gauche et/ou à droite ? Si oui NoSmoking avait proposé cela : #38 et je ne sais pas si tu as essayé de le faire...

De vos deux propositions je ne sais pas qu'elle est la meilleure... C'est à tester...

**patricktoulon** · 20/03/2017, 10h48

bonjour beguinner

oui c'est toujours d'actualité
j'ai visité le lien de noSmoking n'ayant pas réussi a le mettre en oeuvre je suis parti sur un autre principe

mais a la limite cela d'apres n'ont pas vraiment d'importance car si il y selection du mot suivant le principe des espace devant fera le boulot
donc en priorité cela de devant
j'ai d'abords remplacer le 1 er espace si il y en qu'un ca marchait impeccable mais je me suis dit si il y a plusieurs espaces devant de sélectionnes se sera pareil(mémé problème)

j'ai trouvé une substitution mais j'ai toujours des soucis evec ( /" ")
surtout que quand tu ajoute un " " ça t'ajoute en fait "  "
bref c'est tordu comme truc

je vais revoir le lien de noSmoking pour voir si je peut simplifier
mais en fait aussi les start et end n’était pas si con mais il faudrait savoir lire fragment par fragment car " " et "  " c'est pas pareil en terme de len du string du innerHTML

je vais revoir le lien de noSmoking pour voir si je peut simplifier

**patricktoulon** · 20/03/2017, 12h09

allez testez celui la
ca va faire plaisir a noSmoking il y a les émoticône dans le texte et en B64 pour bien compliquer le truc

on peut sélectionner un espace devant il se transforme en " " mais devant oSpan a l'exterieur

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
<html>
 
 
 
<head>
    <!-meta http-equiv="X-UA-Compatible" content="IE=10"->
   <meta http-equiv="X-UA-Compatible" content="IE=10,chrome=1">
 <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 espG = "";
    var sel = window.getSelection();
    var parent = sel.getRangeAt(0).commonAncestorContainer;
    if (parent.nodeType === 3) {
        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.replace("&nbsp\;", " ");
    if (str.substring(0, 1) == " ") {
        oSpan.innerHTML = str.substring(1, str.stringlength);
        espG = "&nbsp;";
    }
    var range = sel.getRangeAt(0);
    range.deleteContents();
    range.insertNode(oSpan);
    sel.removeAllRanges(); //on peut carrément supprimer le range 
    sel.addRange(range); // on garde la selection active IMPORTANT!!!!!!!!!!!
    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;
    }
 
 
    ///////////////////////////////////////////////////////////
    ////rectification au cas ou un/plusieurs  espace(s) de devant aurais été suprimé
    if (espG != "") {
        var sel = window.getSelection();
        var tSpan = document.createElement("SPAN");
        tSpan.innerHTML = espG + oSpan.outerHTML;
        var range = sel.getRangeAt(0);
        range.deleteContents();
        range.insertNode(tSpan);
        sel.removeAllRanges(); //on peut carrément supprimer le range 
        //sel.addRange(range); 
        tSpan.outerHTML = tSpan.innerHTML;
    }
 
 
    ///////////////apres quelques changement on a des balises vides on nettoie ///////// 
 
 
 
 
    //////////////////////////////////merge sameElement/////////////////////
 
 
    // pour les "</strong><strong>" et </em><em>"///////
    var inner = par.innerHTML
    for (var i = 0; i < 4; i++) {
        inner = inner.replace("<\/strong><strong>", "");
        inner = inner.replace("<\/em><em>", "");
    }
    par.innerHTML = inner;
    // ici i faudrait a jouter les mergement des  successifs
    ///////////////apres quelques changement on a des balises vides on nettoie ///////// 
 
 
    for (var e = 0; e < 3; e++) {
        var sp = par.getElementsByTagName("*");
        for (var i = 0; i < sp.length; i++) {
            if (sp[i].innerText == "" && sp[i].tagName != "IMG") {
                sp[i].parentElement.removeChild(sp[i]);
            }
        }
    }
    var sp = par.getElementsByTagName("SPAN");
    for (var i = 0; i < sp.length; i++) {
        if (sp[i].innerHTML == "  ") {
            sp[i].parentElement.removeChild(sp[i]);
        }
    }
    //////////////////////////////////////////////////////////////////// 
    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 <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>
</body>

**Beginner.** · 20/03/2017, 19h25

Tu as donc résolu tous les problèmes ou bien il en reste ?

**patricktoulon** · 20/03/2017, 19h35

re
ben non pas tout comme je l'ai dis je le fait sur 1 espace je buche sur plusieurs espaces
vous allez tellement vite toi et noSmoking vous avez tendance a oublier que je m'essaie au js que depuis 1 mois
d'autant plus que quand on s’enerve étant moi même quelqu'un qui démarre au quart de tour j'ai préféré laisser tomber

j’ignorais qu'une discussion devait prendre un chemin de façon a ce que tout le monde y trouve bonheur sauf le demandeur

après les espaces seulement les successifs de même tag et attributs reste a faire

je parles des fonts et span les strong et em étant réglés
tu me reparlera de whitespace j'ai raté cet episode

**Beginner.** · 20/03/2017, 19h46

Envoyé par patricktoulon

vous allez tellement vite toi et noSmoking vous avez tendance a oublier que je m'essaie au js que depuis 1 mois

Ah bon moi au contraire je me trouve plutôt lent et je me suis même dit que tu allais trop vite pour moi... J'avais du mal à suivre parfois lol...

Envoyé par patricktoulon

j’ignorais qu'une discussion devait prendre un chemin de façon a ce que tout le monde y trouve bonheur sauf le demandeur

Non ce n'est pas ça que j'ai compris... C'est juste que quand tu ouvres un fil pour un point spécifique alors il vaut mieux ne pas y aborder autre chose surtout si le point en question est résolu car dans ce cas comme tu le sais toi-même tu dois mettre ton fil en résolu afin que le fil puisse servir à d'autres personne se posant la même question...

Ainsi normalement tout le monde devrait y trouver son bonheur même le demandeur...

**Beginner.** · 20/03/2017, 19h54

Envoyé par patricktoulon

re
ben non pas tout comme je l'ai dis je le fait sur 1 espace je buche sur plusieurs espaces
...

après les espaces seulement les successifs de même tag et attributs reste a faire

je parles des fonts et span les strong et em étant réglés
tu me reparlera de whitespace j'ai raté cet episode

Oui les espaces blancs c'est encore plus générale, peut-être qu'on peut s'inspirer du code indiqué dans l'autre fil...

**patricktoulon** · 20/03/2017, 20h01

re
oui je vais le mettre en résolu mais je précises que je n'y ai rien compris

donc pour moi tous sauf le demandeur a trouvé bonheur

je pense pas aller si vite que ça il est vrai que ma méthode je sais pas si elle s'est vu ailleurs

j'ai simplement raisonner logiquement peut être pas JS je te l'accorde

donc pour en revenir ici
espaces multiple
successif même tag même attribut(font et span) après regroupement de plusieurs shadow en un seule couleur les eventuels font bachground qui auraient été couper reste sépares inutilement

et voir ces whitespace si cela peut m’éviter de triturer dans " " je suis preneur

je tiens a dire quand même que j'ai un peu potasser le grand tinie editor
quand j'applique les fonctions il ne me rends pas un code si propre que ca, parfois c'est même le contraire

peut être en demanderais-je un peu beaucoup
surtout que en l’état elle fonctionne très bien

**patricktoulon** · 21/03/2017, 11h44

Bonjour beguinner
le problème de(s) espace(s) (un/multiple) a gauche est résolu
je procède en deux fois comme ceci c'est vraiment tout bête en fait

Code :

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

1
2
3
4
5
6
7
8
9
//si il y a des "&nbsp;"
tab=str.split("&nbsp;");
if (tab.length>1){
espG=str.replace(tab[tab.length-1],"");//on récupère la partie de gauche dans espG
str=tab[tab.length-1];//on garde le texte pour oSpan
}
//il y a quand meme un espace quand il n'y a pas de "&nbsp;"
if(str.substring(0,1)==" "){espG=espG+" ";str=str.substring(1,str.stringlength);}//on supprime encore cet espace mais on le tock avec ce qu'il y a deja ou pas dans espG
oSpan.innerHTML =str ;//str conteint maintenant le text sans la partie gauche (tout "&nbsp;" et espaces confondus)

dans le range il suffit de memove all range
et de remettre ospan

voila reste les successif: et se sera parfait

**Beginner.** · 21/03/2017, 19h54

Salut,

C'est résolu à gauche ? Complètement ? Si oui pourquoi ne pas faire pareil (appliquer le même principe) à droite ?

Sinon j'ai perdu le fil, c'est quoi le problème exactement avec les espaces ? As-tu un exemple concret que je puisse tester avec le débogueur ?

Sinon je pense que ce serait bien d'étudier la solution de NoSmoking puisque elle tient compte de tous les espaces unique ou multiple à gauche et/ou à droite....

**patricktoulon** · 22/03/2017, 14h42

Bonjour Beguinner

Bon : le problème avec les espace je le redis c'est que quand je sélectionne un morceau de texte avec x ou 1 espace devant
j'applique le shadow et qu'ensuite je revient dessus j'ai changé d'avis sur la couleur et que je re sélectionne le même texte mais sans les ou une partie des espaces qui ont été pris la premières fois je me retrouve avec des span shadow avec des espaces dedans et c'est tout si je fait ca au moins 3 fois ca devient la bérézina

voila mon problème des espace

ensuite je veux bien m'inspirer du model de noSmoking mais soit il n'y a pas tout le code soit la fonction getTextNode n'est pas compatible chez moi car le debuger dans IE me la donne "indefinie"

ensuite pour la droite avec ma méthode j'ai essayé mais ça marche plus et me fout le boxon

j'ai tenter une autre approche mais la c'est pareil quand ca va droite ça va plus a gauche et vice et versa

**Beginner.** · 22/03/2017, 19h30

Salut,

Je viens de voir ton message sur l'autre fil alors, si j'ai bien compris, cette fois-ci c'est bon tu as résolu le problème ?

**patricktoulon** · 22/03/2017, 19h34

re
Bonsoir beguinner
oui je penses je suis en train de tester dans tout les sens et pour le moment aucun ratés même avec des emoticones et touticointi
je cherche les failles
pour le moment c'est du 100% en ce qui concerne ces espaces

**Beginner.** · 22/03/2017, 20h12

Ah ben tant mieux...

Remplacement d'un élément par son innerHTML

JavaScript

Discussions similaires

Partager

Partager