Remplacement d'un élément par son innerHTML

**patricktoulon** · 11/03/2017, 22h01

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

**Beginner.** · 11/03/2017, 22h39

Envoyé par patricktoulon

je connaissais pas les 3 fonctions que tu démontre

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

Mais peut-être que j'ai mal compris...

**patricktoulon** · 11/03/2017, 23h30

d'acords je comprend mieux je cherche depuis tout a l'heure

ben oui le shema est bien celui là ,pourquoi pas

**Beginner.** · 11/03/2017, 23h42

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

**patricktoulon** · 11/03/2017, 23h58

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

**Beginner.** · 12/03/2017, 00h30

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 : ,  et 

**patricktoulon** · 13/03/2017, 08h45

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 :

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

**NoSmoking** · 13/03/2017, 16h10

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

c'est presque que cela si l'on s'en réfère à la recommandation : 2.10. Surrounding Content.

Je vais quand même regarder si le fonctionnement est le même...

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 bien

Code :

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

1
2
  // place le <span> dans l'étendue Range
  oRange.insertNode(oSpan);

puisque j'extrais le contenu et l'append après. Tu l'as d'ailleurs découvert dans tes tests.

• 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

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
/**
 * Supprime espace en début et fin de chaine
 * @method trim
 * @param {String} str - la chaine à nettoyer
 * @return {String} la chaine nettoyée.
 * @comment : avantage par rapport à la méthode String.prototype.trim(), elle traite les undefined
 */
function trim(str) {
  return (null === str || undefined === str) ? "" : ("" + str).replace(/^\s*|\s*$/g, "");
}
/**
 * Supprime les espaces début et fin des propriétes et valeurs et ajoute un ; à la fin de la chaine
 * @method formatInlineStyle
 * @param {String} style - chaine à traiter
 * @returns {String}  result - chaine style formaté
 */
function formatInlineStyle(style) {
  var i;
  var props;
  var prop;
  var p0;
  var p1;
  var result = [];
  // supprime ; de fin si existe
  style = style || "";
  style = style.replace(/;$/, "");
  // récup. des styles
  props = style.split(";");
  for (i = 0; props[i]; i += 1) {
    // traitement des propriétées-valeurs
    prop = props[i].split(":");
    p0 = trim(prop[0]);
    p1 = trim(prop[1]);
    // stockage si les 2 existent
    if (p0 && p1) {
      result.push(p0 + ":" + p1);
    }
  }
  // ajout des ;
  result.push("");
  style = result.join(";");
  return style;
}
/**
 * Transforme une chaine en object
 * @method style2Object
 * @param {String} style - chaine à traiter
 * @returns {Object}  result - Objet contenant les {key:value} des styles
 * @example :
 * - entrée
 *   <span style="font-size: 1em; color: blue">
 * - retour
 *   {"font-size": "1em", "color": "blue"}
 */
function style2Object(style) {
  var i;
  var props;
  var prop;
  var result = null;
  var s;
  // mise au format pour tests
  s = formatInlineStyle(style);
  // si existe style
  if (s) {
    result = {};
    // supprime ; de fin
    s = s.replace(/;$/, "");
    // récup. des styles
    props = s.split(";");
    for (i = 0; props[i]; i += 1) {
      // traitement des propriétées-valeurs
      prop = props[i].split(":");
      result[prop[0]] = prop[1];
    }
  }
  return result;
}
/**
 * Transforme un style inline en object
 * @method getInlineStyleObject
 * @param {String/Object} elem - id élément ou élément
 * @returns {Object}  result - Objet contenant les {key:value} des styles
 * @example :
 * - la récup de
 *   <span style="font-size:1em;color:blue">
 * - retourne
 *   {"font-size": "1em", "color": "blue"}
 */
function getInlineStyleObject(elem) {
  var i;
  var props;
  var prop;
  var result = null;
  var s;
  // récup. élément suivant type noeud/id
  elem = "object" === (typeof (elem)) ? elem : document.getElementById(elem);
  if (elem && 1 === elem.nodeType) {
    // récup. style inline
    s = (elem.getAttribute) ? elem.getAttribute("style")  : false;
    // si existe style
    if (s) {  
      result = style2Object(s);
    }
  }
  return result;
}
/**
 * Ajoute un style inline à un élément
 * @method setInlineStyle
 * @param {String/Object} elem - id élément ou élément
 * @param {String} style - le style à affecter
 * @returns {Object} elem - élément pour chainage
 */
function setInlineStyle(elem, style) {
  // récup. élément suivant type noeud/id
  elem = "object" === (typeof (elem)) ? elem : document.getElementById(elem);
  if (elem && 1 === elem.nodeType) {
    // formatage du style
    // ajoute ; en fin si non existant
    style = formatInlineStyle(style);
    // récup. style actuel
    var attr = elem.getAttribute("style");
    // si existe
    if (attr) {
      // mise en forme du style
      attr = formatInlineStyle(attr);
      // concaténe le style
      attr += style;
    }
    else {
      // égal le style
      attr = style;
    }
    // mise à jour attribut style
    elem.setAttribute("style", attr);
  }
  // pour chainage
  return elem;
}
/**
 * Récupére le style inline d"un élément
 * @method removeInlineStyle
 * @param {String/Object} elem - id élément ou élément
 * @param {String} style - le style à supprimer
 * @returns {Object} elem - élément pour chainage
 */
function removeInlineStyle(elem, style) {
  // récup. élément suivant type noeud/id
  elem = "object" === (typeof (elem)) ? elem : document.getElementById(elem);
  if (elem && 1 === elem.nodeType) {
    // regExp à appliquer
    var reg = new RegExp("(" + style + ".*?;)", "gi");
    // récup. style actuel
    var attr = elem.getAttribute("style");
    // si existe
    if (attr) {
      // mise en forme du style
      attr = formatInlineStyle(attr);
      // supprime le style
      attr = attr.replace(reg, "");
    }
    // modifie ou supprime si vide
    if (attr && attr.length) {
      elem.setAttribute("style", attr);
    }
    else {
      elem.removeAttribute("style");
    }
  }
  // pour chainage
  return elem;
}
/**
 * Récupére le style inline d"un élément
 * @method getInlineStyle
 * @param {String/Object} elem - id élément ou élément
 * @returns {String} style - String du style inline
 */
function getInlineStyle(elem) {
  var style = "";
  // récup. élément suivant type noeud/id
  elem = "object" === (typeof (elem)) ? elem : document.getElementById(elem);
  if (elem && 1 === elem.nodeType) {
    // récup. style actuel
    style = elem.getAttribute("style");
    // si existe
    if (style) {
      // supprime ; de fin, permet de faire un split(";")
      style = style.replace(/;$/, "");
    }
  }
  return style;
}
/**
 * Remplace/Ajoute un style inline à un élément
 * @method replaceInlineStyle
 * @param {String/Object} elem - id élément ou élément
 * @param {String} prop - la propriétée du style à affecter
 * @param {String} value - la valeur de la propriétée du style à affecter
 */
function replaceInlineStyle(elem, prop, value) {
  // récup. élément suivant type noeud/id  
  elem = "object" === (typeof (elem)) ? elem : document.getElementById(elem);
  if (elem && 1 === elem.nodeType) {
    // récup. style actuel
    var s = elem.getAttribute("style");
    // regExp à appliquer
    var reg = new RegExp("(" + prop + ".*?;)", "gi");
    // le style existe
    if (reg.test(s)) {
      s = s.replace(reg, prop + ":" + value);
    }
    else {
      s = prop + ":" + value;
    }
    // mise au format
    s = formatInlineStyle(s);
    // mise à jour attribut style
    elem.setAttribute("style", s);
  }
}

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.

• Concernant la fonction shadowColor, après rapide test pas grand chose de neuf

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
function Shadowcolor(coul, ajout) {
  var oEditor = document.getElementById('editor');
  // récup. selection
  var oSelection = window.getSelection();
  // quitte si pas de sélection
  if (!oSelection.anchorNode) return;
 
  // pointe sur la selection
  var oRange = oSelection.getRangeAt(0);
  // get conteneur commun
  var oParent = oRange.commonAncestorContainer;
  // évite les débordements, on peut également choisir de ne rien faire
  if (!oEditor.contains(oParent)) {
    oRange.setStartBefore(oEditor.firstChild);
    oRange.setEndAfter(oEditor.lastChild);
  }
  // création d'un élément neutre
  var oSpan = document.createElement('SPAN');
 
  // récup des noeuds de l'étendue Range
  var oSelectedText = oRange.extractContents();
  // place le <span> dans l'étendue Range
  oRange.insertNode(oSpan);
  // ajout de la sélection en cours
  oSpan.appendChild(oSelectedText);
  // replace la sélection
  oRange.selectNode(oSpan);
 
  // suppression des text-shadow existants sur enfants
  var ind;
  var children = oSpan.getElementsByTagName('*');
  for (ind = 0; ind < children.length; ind += 1) {
    removeInlineStyle(children[ind], 'text-shadow');
  }
  // style suivant le cas
  var style = ajout ? 'text-shadow:0 0 10px ' + coul : 'text-shadow:none';
  setInlineStyle(oSpan, style);
 
  // supprime le style si déjà dans parent
  cleanInlineStyleNode(oSpan, oParent);
  // nettoyage
  cleanEditor( oEditor);
}

je noterais quand même qu'il faut nettoyer TOUS les enfants, au moins les et les , du oSpan et pas seulement les .

• Concernant le nettoyage, fonction cleanEditor, j'ai identifié, dans un premier temps, les actions suivantes :

normalisation du HTML, pas d'enfant dans un parent , cela peut arriver
suppression des élément n'ayant pas d'attribut donc inutile
Supprime des éléments vides

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

On obtient la fonction suivante, évolutive donc

Code :

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

1
2
3
4
5
6
7
8
9
function cleanEditor( editor){
  // pas de <span> parent de <p>
  normalizeParagraph(editor);
  // regroupement des <span>
  cleanSpanElements(editor);
  // supprime les noeuds vides
  clearWhiteSpace(editor);
  removeEmptyElements(editor);
}

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 :

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
/**
 * Supprime les styles inline du noeud qui sont déjà déclarés dans un parent
 * @method cleanInlineStyleNode
 * @param {String/Object} node - id élément ou élément à cleanner
 * @param {Object} node - élément conteneur
 */
function cleanInlineStyleNode(node, top) {
  var ns;
  var ps;
  var parent;
  // récup. élément suivant type noeud/id
  node = "object" === (typeof (node)) ? node : document.getElementById(node);
  if (node && 1 === node.nodeType) {
    ns = getInlineStyleObject(node);
    // si existe style
    if (ns) {
      // récup. du Node parent
      parent = node.parentElement;
      // récup. du Node top
      top = ("object" === (typeof (top)) ? top : document.getElementById(top)) || document.querySelector("body");
      // remonte l'arbre
      while ( parent && parent !== top) {
        // récup. style du parent
        ps = getInlineStyleObject(parent);
        // si existe style
        if (ps) {
          // parcours les propriétés du style
          Object.keys(ps).forEach(function (prop) {
            // supprime propriété si trouvée dans le parent
            if (ps[prop] === ns[prop]) {
              removeInlineStyle(node, prop);
            }
          });
        }
        // on remonte
        parent = parent.parentElement;
      }
    }
  }
  // pour chainage
  return node;
}
/**
 * Déplace tous les enfants d'un élément dans son parent
 * @method unWrap
 * @param {String/Object} node - noeud à traiter
 */
function unwrap(node) {
  // récup. élément suivant type noeud/id
  node = 'object' === (typeof (node)) ? node : document.getElementById(node);
  if (node) {
    var parent;
    // récup. du Node parent
    parent = node.parentNode;
    // déplace tous les enfants hors du noeud
    while (node.firstChild) {
      parent.insertBefore(node.firstChild, node);
    }
    // supprime le noeud devenu vide
    parent.removeChild(node);
  }
}
/**
 * Supprime les éléments <span> neutre, sans l'attribut style
 * @method cleanSpanElements
 * @param {String/Object} node - noeud à traiter
 * @param {String} tag - la balise à prendre en compte
 * @todo faire test sur toutes les styles
 */
function cleanSpanElements(node) {
  // récup. élément suivant type noeud/id
  node = 'object' === (typeof (node)) ? node : document.getElementById(node);
  if (node) {
    var oSpans = node.querySelectorAll('span');
    var i;
    var nb = oSpans.length;
    for (i = 0; i < nb; i += 1) {
      cleanInlineStyleNode(oSpans[i], node);
      // si l'élément est neutre sans style
      if (!oSpans[i].hasAttribute('style')) {
        // on déplace les enfants dans le parent
        unwrap(oSpans[i]);
      }
    }
  }
}
/**
 * Supprime les noeuds vide d'un noeud
 * @method removeEmptyElements
 * @param {String/Object} node - id élément ou élément à cleanner
 * @returns {Object} node - élément pour chainage
 */
function removeEmptyElements(node) {
  var ind;
  var child;
  // récup. élément suivant type noeud/id
  node = 'object' === (typeof (node)) ? node : document.getElementById(node);
  if (node) {
    // parcours les enfants si existent
    for (ind = 0; ind < node.childNodes.length; ind += 1) {
      child = node.childNodes[ind];
      // si il y a des enfants
      if (child.childNodes.length) {
        // recursif sur noeud actif
        removeEmptyElements(child);
      }
      if (1 === child.nodeType) {
        // test si noeud vide hors élément « remplacé » où auto fermant
        if (!child.childNodes.length && !/^(br|hr|input|img)$/i.test(child.nodeName)) {
          // supprime le noeud
          node.removeChild(child);
          // reajuste indice car noeud détruit
          ind -= 1;
        }
      }
    }
  }
  // pour chainage
  return node;
}
/**
 * Supprime les noeuds vide inutile d'un document, d'un noeud
 * @method clearWhiteSpace
 * @param {String/Object} node - id élément ou élément à cleanner
 * @returns {Object} node - élément pour chainage
 * @see {@link https://developer.mozilla.org/fr/docs/Gestion_des_espaces_dans_le_DOM}
 */
function clearWhiteSpace(node) {
  var ind, child;
  // récup. élément suivant type noeud/id
  node = 'object' === (typeof (node)) ? node : document.getElementById(node);
  if (node) {
    for (ind = 0; ind < node.childNodes.length; ind += 1) {
      child = node.childNodes[ind];
      // traitement sur noeud #text et #comment
      if ((3 === child.nodeType && !/\S/.test(child.nodeValue)) || 8 === child.nodeType) {
        // supprime le noeud
        node.removeChild(child);
        // reajuste indice car noeud détruit
        ind -= 1;
      }
      else if (1 === child.nodeType) {
        // recursif sur noeud actif
        clearWhiteSpace(child);
      }
    }
  }
  // pour chainage
  return node;
}
/**
 * Déplace les <p>, élément block, qui serait parent d'un <span>, élément inline.
 * @method normalizeParagraph
 * @param {String/Object} node - id élément ou élément à traiter
 */
function normalizeParagraph( node){
  // récup. élément suivant type noeud/id
  node = 'object' === (typeof (node)) ? node : document.getElementById(node);
  if (node) {
    var oElems = node.querySelectorAll('p');
    var i;
    var nb = oElems.length;
    var oParent;
    var style;
    for (i = 0; i < nb; i += 1) {
      oParent = oElems[i].parentElement;
      // si l'élément est contenu dans un <span>
      if (oParent.tagName === 'SPAN') {
        oParent.parentNode.insertBefore(oElems[i], oParent);
        // transfert le style du parent
        style = getInlineStyle(oParent);
        if( style){
          style = style2Object(style);
          Object.keys(style).forEach(function (prop) {
            replaceInlineStyle(oElems[i],  prop , style[prop]);
          });
        }
      }
    }
  }
}

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.

• 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

nota: on est quand même très mais alors très loin d'un CKEditor

**patricktoulon** · 14/03/2017, 08h13

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
Nom : demo2.gif
Affichages : 654
Taille : 644,3 Ko

Nom : demo2.gif
Affichages : 654
Taille : 644,3 Ko

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 :

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

1
2
  str = str.replace(/"<\/strong><strong>"/g, "");
     str = str.replace(/"<\/em><em>"/g, "");

**patricktoulon** · 14/03/2017, 11h20

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 "" ,"" dans la meme balise parent
j'ai mis des commentaires a gogo

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

**Beginner.** · 14/03/2017, 21h37

Envoyé par NoSmoking

• Bonus
Pour finir je vous ai mis le fichier de test sur developpez : Test manipulation du DOM.

Super ! Merci, c'est vraiment pratique...
J'ai commencé à faire quelques tests, je doit continuer... Et je regarderai aussi le code...

Envoyé par patricktoulon

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

Oui j'avais aussi remarquer cela mais je pense qu'on doit pouvoir régler ça...

Envoyé par patricktoulon

j'ai un résultat quasi hyperpropre sauf les "" ,"" dans la meme balise parent

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 : #67).

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

Envoyé par patricktoulon

bon ben je suis aller jusqu'au bout de mon idée avec extractcontent() et contextualfragment

J'ai regardé et je pense que cette partie :

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

Pourrait être remplacée par un simple range.insertNode(Span);... C'est à tester...

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

**patricktoulon** · 14/03/2017, 23h32

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

je vais vérifier ca
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

**patricktoulon** · 14/03/2017, 23h51

bon ben

Code :

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

sp[i].outerHTML = sp[i].innerHTML;

n'a pas du tout le même effet ca me laisse les shadow qui éventuellement se trouve au milieu de la selection

**patricktoulon** · 15/03/2017, 00h11

insertnode span par contre ca a l'aire de fonctionner

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

a tu peux y aller a outrance
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

**Beginner.** · 15/03/2017, 19h43

Envoyé par patricktoulon

bon ben

Code :

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

sp[i].outerHTML = sp[i].innerHTML;

n'a pas du tout le même effet ca me laisse les shadow qui éventuellement se trouve au milieu de la selection

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

Envoyé par patricktoulon

insertnode span par contre ca a l'aire de fonctionner

Ah ben tant mieux c'est toujours ça de gagner...

Envoyé par patricktoulon

a tu peux y aller a outrance

Ok je vais voir ça...

Envoyé par patricktoulon

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

A ce propos j'ai vu ton autre fil, je vais y intervenir...

**Beginner.** · 17/03/2017, 17h57

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

**patricktoulon** · 18/03/2017, 00h24

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?

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
 
 
<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>&nbsp;
                <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>

et pour le coup ayant compris ce que faisait execComand je fait la même chose sans entourloupette
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:

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

on peut même reprendre le même principe et le refaire avec les span pour la compatibilité chrome

le nombre de lignes commence sérieusement a diminuer j'aime beaucoup les codes qui sont concis

**patricktoulon** · 18/03/2017, 11h29

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

ben en fait j'ai rien elle marche a la perfection !!!

vous allez me dire
et donc?????
ben je vais vous repondre qu'elle ne devrait pas

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

le code en entier :

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

**Beginner.** · 18/03/2017, 11h42

Quelle version veux-tu qu'on teste finalement ? Celle du dernier message (le 98) ?

**patricktoulon** · 18/03/2017, 11h46

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

Remplacement d'un élément par son innerHTML

JavaScript

Discussions similaires

Partager

Partager