Discussion :

[patricktoulon]

oui j'en ai décortiqué quelque un de richtext Editor aucun ne fait ca en pure javascript

perso je suis perdu je me tate d’abandonner la conversion vb/js de mon wysiwyg

ça répond jamais pareil et autre bizarrerie dont je n'est trouvé explication nulle part

j'ai passer beaucoup trop de temps sur cette fonction pour un résultat néant CA vaut pas le coup

et surtout j'ai pas envie d’écrire un roman a chaque fonction

je vais te suivre dans tes expériences car pourquoi pas garder un peu d'espoir mais pour moi le wysiwyg restera VB il fonctionne encore très bien après tout

[Watilin]

J’ai envie d’éclaircir un point, je ne sais pas si ça a été abordé dans ce fil : les méthodes range.extractContents et range.cloneContents renvoient des DocumentFragment. Ce ne sont pas exactement des nœuds, disons plutôt des « points d’insertion » auquels on peut ajouter autant de nœuds qu’on veut.

Par exemple, si tu as d’une part un fragment contenant un <font>, un nœud texte, puis un autre <font>, et d’autre part une <div> servant de conteneur, au moment où tu vas ajouter le fragment à la <div>

Code :

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

div.appendChild(fragment);

C’est comme si tu faisais

Code :

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

1
2
3
div.appendChild(font1);
div.appendChild(texte);
div.appendChild(font2);

Autrement dit, les enfants du fragment sont ajoutés à la place du fragment.

Ainsi, on peut voir les fragments comme des conteneurs transparents.

Voilà, j’espère que ça peut aider…

[Loralina]

Bonjour,
Je n'ai pas suivi la suite de la conversation, mais par rapport à ceci :

Concernant ta balise <font> elle est avantageusement remplaçable par une balise <span> comme te l'a fait remarquer Beginner..

Pourquoi gérer des « class » et des « style inline » et ne pas utiliser QUE des « style inline » que tu peux modifier en fonction de tes besoins ?

Je suis assez d'accord avec le fait d'avoir un seul attribut.
J'avais développé un éditeur avec "span" et "class" pour la partie texte : pas d'attribut "style" ou autre, pas de "execCommand", tout avec les noeuds.
J'avais une classe pour chaque valeur (si je veux affiner une teinte par la suite, il suffit de changer la valeur dans la classe, tous les enregistrements en base en profiteront).
L'objectif n'était pas forcément de rechercher le code html le plus optimisé possible, mais d'avoir une syntaxe simple pour faire une vérification complète niveau serveur.
Rien n'empêche ultérieurement de faire un traitement d'optimisation du html par la suite (si nécessaire, car en réalité, peu d'utilisateurs vont s'amuser à changer les couleurs ou autre à répétition, donc le code html reste léger).

Comme point de départ, je pense qu'il faut d'abord bien définir la syntaxe à obtenir.
Si on a ceci : <couleur1>texte1 texte2 text3</couleur1>
Si on veut annuler la couleur sur "texte2", que veut-on obtenir ?
ceci : <couleur1>texte1 </couleur1>texte2<couleur1> text3</couleur1>
ou ceci : <couleur1>texte1 <couleurDefaut>texte2</couleurDefaut> text3</couleur1>
Et si on en change la couleur ?
ceci : <couleur1>texte1 </couleur1><couleur2>texte2</couleur2><couleur1> text3</couleur1>
ou ceci : <couleur1>texte1 <couleur2>texte2</couleur2> text3</couleur1>
Dans les deux cas, j'étais partie sur la deuxième possibilité (mais sans me renseigner sur la bonne pratique, j'ai juste pris ce qui me semblait le plus simple à coder).

En tout cas, si on commence à mélanger la manipulation sur les noeuds avec une autre sur les chaînes avec du "execCommand" avec plusieurs types de balises avec plusieurs attributs et tout en recherchant une compatibilité multi-navigateur, cela peut devenir vite très complexe.

[patricktoulon]

bonsoir Watilin
oui extractcontent était la méthode que j'avais adopté au debut
mais le soucis l'ors de l insertionnode dans le ranges ca me pourrissait le code des calques vides de ses mêmes nœuds

j'ai découvert en affichant le code html a chaque action que quand je deletais le range je me retrouvais avec un code hyper propre sans la selection
je me suis dis banco !!!

donc plutôt que extract j'ai opté pour clone qui ne supprime pas la sélection au depart
ce qui m'a permis grace a beguinner de capter ce qu'il restait a gauche et pourvoir ainsi identifier le dernier font contenant éventuellement le reste qui aurais été tronqué après délétion du range
ca c'est parfait
j'ai donc

une variable élément font contenant la sélection dans la quelle j'arrive a virer tout ce que je désire virer et remodeler
ca c'est parfait aussi
comme j'ai identifier la balise a gauche de la sélection et qu'elle se referme toute seul et qu'elle garde ses propriété du départ il ne me reste plus qu'a faire un insertbefore(cette dite balise.nexsibling)
ça ca marche mais déjà on retrouve des spectres de l'ancien code alors que le range a été complètement délété
chose qui pour moi sort de ma compréhension

c'est comme si je jetais quelque choses a la poubelle et que le temps de me retourner cette même chose se retrouvait dans mon plaquard
bon dans le fond rien ne m’empêche de faire un nettoyage

mais le soucis c'est que si la sélection contient une balise entière la partie gauche est "undefined"

je me suis alors dis ok si la sélection ne laisse pas d’orphelins je fait un range insert(newbalise) cette balise contenant le nouveau code )

et oui mais problème j'ai délété le range

je ferais un départ au propre demain en fin d’après midi pour démontrer ce que je dis
jusqu’à samedi beaucoup de boulot
et puis ca me permet d'y voir plus clair de m’éloigner de ce problème j’étais trop dessus et partais dans tout les sens
mais les résultats sont quand même assez déconcertants

[patricktoulon]

bonsoir loralina

qu'importe pour moi le style de balise mon soucis c'est le foutoir dans le code html que cela fait

@watilin
le contenu du div edirable dans mo wysiwyg est destiné au mail qui sera transporté par CDO je me vois mal faire un style pour chaque couleur ,chaque shado,etc.....
et seulement attribuer une class car il faudrait que j'envoie la balises style avec le code du div et d'apres mes constat le mime du code html du mail le restitue très mal
et puis c'est impensable cela ferait une sacré feuille de style

je posterais un code de départ demain la ce soir trop crevé

[Beginner.]

Comme point de départ, je pense qu'il faut d'abord bien définir la syntaxe à obtenir.
Si on a ceci : <couleur1>texte1 texte2 text3</couleur1>

Si on veut annuler la couleur sur "texte2", que veut-on obtenir ?

ceci : <couleur1>texte1 </couleur1>texte2<couleur1> text3</couleur1>
ou ceci : <couleur1>texte1 <couleurDefaut>texte2</couleurDefaut> text3</couleur1>

...
Dans les deux cas, j'étais partie sur la deuxième possibilité (mais sans me renseigner sur la bonne pratique, j'ai juste pris ce qui me semblait le plus simple à coder).

Le deuxième est plus simple mais l'inconvénient c'est qu'on se retrouve avec une balise en plus et ce à chaque fois qu'on voudra annuler la couleur...
Il me semble que execCommand fait le premier...

Comme point de départ, je pense qu'il faut d'abord bien définir la syntaxe à obtenir.

...
Et si on en change la couleur ?

ceci : <couleur1>texte1 </couleur1><couleur2>texte2</couleur2><couleur1> text3</couleur1>
ou ceci : <couleur1>texte1 <couleur2>texte2</couleur2> text3</couleur1>

Dans les deux cas, j'étais partie sur la deuxième possibilité (mais sans me renseigner sur la bonne pratique, j'ai juste pris ce qui me semblait le plus simple à coder).

Cette fois c'est le deuxième qui est plus économique mais son inconvénient c'est qu'il est plus difficile à gérer, on se retrouve avec des balises imbriquées ce qui implique par exemple que si on veut annuler la couleur du text2 il faudra gérer couleur2 et couleur1...

Sauf si pour l'annulation on utilise la deuxième méthode (utiliser "couleurDefaut") de la première question car dans ce cas il suffirait de remplacer couleur2 par couleurDefaut...

Là aussi il me semble que execCommand fait le premier...

[Loralina]

Bonjour,
J'ai testé l'exemple https://developer.mozilla.org/fr/doc...ing_in_Mozilla :

Il n'y a pas réellement de couleur par défaut, mais, pour le changement de couleur, j'obtiens ma version 2, sur Internet Explorer et Firefox :

Code :

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

<font color="red">texte1 <font color="black">texte2</font> texte3</font>

Ensuite, si je mets une couleur sur "te2 tex" :
Internet Explorer :

Code :

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

<font color="red">texte1 <font color="black">tex</font><font color="blue">te2 tex</font>te3</font>

Firefox :

Code :

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

<font color="red">texte1 <font color="black">tex<font color="blue">te2</font></font><font color="blue"> tex</font>te3</font>

Si je teste mon éditeur, j'ai le même que cet exemple sur Firefox (mais avec "span" et "class"), donc pas le plus optimisé, l'important pour moi étant d'avoir le même code sur les différents navigateurs.
Si je sélectionne tout et que je mets en "vert", c'est nettoyé comme ceci : <vert>texte1 texte2 texte3</vert>
Après, il ne doit pas y avoir grand chose à faire pour optimiser un peu plus, je le ferai peut-être à l'occasion.

Le deuxième est plus simple mais l'inconvénient c'est qu'on se retrouve avec une balise en plus et ce à chaque fois qu'on voudra annuler la couleur...

Je m'étais dit qu'annuler la couleur, c'était pareil qu'en changer, j'avais préféré uniformiser pour plus de simplicité.
Il est possible qu'une méthode (ou le rendu html) soit plus simple sur un exemple, mais moins sur un autre.

A considérer aussi ce genre d'exemple :

Code :

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

<i><font size="4">texte1 texte2</font> texte3</i>

Pour annuler l'italique sur "texte2", avec l'exemple utilisant "execCommand" :
Internet Explorer :

Code :

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

<font size="4"><em>texte1 </em>texte2</font><em> texte3</em>

Firefox :

Code :

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

<i><font size="4">texte1 </font></i><font size="4">texte2</font><i> texte3</i>

Comme quoi, plusieurs approches sont possibles, mais si on veut tout vérifier sur le serveur et être compatible avec plusieurs navigateurs, "execCommand" n'est pas forcément le plus simple, surtout si on n'arrive pas à gérer la totalité de l'édition avec.

[patricktoulon]

Bonjour loralina
j'ai tester ton lien effectivement il fonctionne mais il n’apporte rien que le mien n'ai déjà

tout ce qui est color,size,bold,italic,underline,strike,itre(H),liste ordonnées ,liste non ordonnée ,etc... fonctionne parfaitement bien

d’ailleurs pour les liste la mienne est mieux car avec execcomand il faut sélectionner tandis que moi je peut cliquer le bouton pour commencer une liste

non le soucis c'est des que l'on touche au propriétés par le style css visiblement l'auto complétion par le dom déraille
dans le sens ou j'ai des balises inutiles dans le code html par contre le résultat visuel lui est bien

[patricktoulon]

pour reprendre votre exemple avec color
apres le foutoir que foutoir que fait le dom avec insertnode dans in range

comme le delete range me nettoie le code je vois pas pourquoi m'en priver

exemple si j'ai

<font style="text-shadow:0px 0px 10px red>bonjour a tous </font>

et que je selectionne "a tous" pour le mettre en vert et delete le range
j'obtiens

<font style="text-shadow:0px 0px 10px red>bonjour </font>

le reste de la balise qui n'a pas été selectionner est automatiquement refermée et garde ses propriétés
il ne reste plus qu'a mettre la balise créé dynamique ment a la suite
comme suit
[QUOTE][QUOTE]<font style="text-shadow:0px 0px 10px red>bonjour a tous </font><font style="text-shadow:0px 0px 10px green> a tous </font>

manque de pot le delete range visiblement ne surprime pas les ranges puisque je les retrouve a la fin et vides ou dans la font originale vides aussi
voila mon soucis depuis 3 semaines
je ne suis pas le premier a le constater, j'ai trouvé divers sources qui en ont parlé mais a ce jour personne n'a de solutions

[patricktoulon]

re
demo avec résultat dans message a chaque etape j'ai le mot "texte " en shadow red sur "te" et "xte" en blue" mais "xt" est en italic et le tout en bold je met "exte" en shadow vert
on se rends bien compte que des que dans la sélection il y a au moins 2 font le dom déraille et c'est pareille avec les span j'ai testé

[Beginner.]

Salut,

Bonjour loralina
j'ai tester ton lien effectivement il fonctionne mais il n’apporte rien que le mien n'ai déjà

Je pense que Loralina a donné le lien juste pour pouvoir faire des tests et c'est vrai que c'est pratique... En plus cela nous fait un moyen commun pour que chacun puisse tester ce que l'un de nous aura fait...

Il se trouve que je l'utilise moi-même (encore une fois juste pour faire des tests)...

manque de pot le delete range visiblement ne surprime pas les ranges puisque je les retrouve a la fin et vides ou dans la font originale vides aussi
voila mon soucis depuis 3 semaines
je ne suis pas le premier a le constater, j'ai trouvé divers sources qui en ont parlé mais a ce jour personne n'a de solutions

J'ai commencé à comprendre pourquoi ça déconne et en fait ça ne déconne pas vraiment, c'est juste que cela suit une certaine logique...

le reste de la balise qui n'a pas été selectionner est automatiquement refermée et garde ses propriétés

Oui c'est le cas pour toutes les balises qui ne sont pas entièrement dans la sélection... Pour la suite je vais raisonner par rapport à l'extrémité gauche de la sélection... Mais c'est le même principe pour l'extrémité droite de la sélection.

Ainsi chaque balise dont seule une partie est dans la sélection sera refermée, ce qui est nécessaire pour garder le formatage à gauche de la sélection... Maintenant ce qu'il faut savoir c'est que chaque balise fermée est ré-ouverte à l'intérieure de la sélection, là aussi c'est nécessaire pour garder le formatage de la partie du texte qui est à l'intérieur de la sélection...

Alors dés que tu fais une insertion tu retrouves ces balises ré-ouvertes et donc on se retrouve avec ces balises multipliés par deux...

Je pense que c'est difficile à comprendre sans exemple alors prenons en un :

before - this is <b><i>some text [to show the</i></b> problem] - after Le rendu visuel est :
"before - this is some text [to show the problem] - after".

Si on sélectionne "[to show the problem]" et qu'on prend avec les ranges le html de la sélection (rangeM) celui à gauche (rangeG) et celui à droite (rangeD) on a :

rangeG :
before - this is <b><i>some text </i></b>
rangeM :
<b><i>[to show the</i></b> problem]
rangeD :
- after

Quand on insert rangeM on obtient rangeG + rangeM + rangeD :

before - this is <b><i>some text </i></b><b><i>[to show the</i></b> problem] - after

On voit bien que les balises fermées dans rangeG sont ré-ouvertes juste après dans rangeM ce qui fait que, après insertion on se retrouve avec ces balises multipliés par deux (2x<b> et 2x<i>).

Si par exemple avant l'insertion on supprime l'italique de la sélection on se retrouve avec :

before - this is <b><i>some text </i></b><b>[to show the</b> problem] - after

Ca marche mais on aurait aimé avoir :

before - this is <b><i>some text </i>[to show the</b> problem] - after

Ce serait donc un moyen assez simple de supprimer un formatage spécifique si la multiplication des balises ne gêne pas...

[patricktoulon]

re
bonsoir beguinner
voila la seule fonction que j'ai pu monter avec divers recherches elle fonctionne nikel
cela pourrait t’intéresser (comment on obtiens le start et le end
tu vera aussi que l'elelement créé est différent

reste toujours ce soucis de doubles et fantôme
je n'arrive pas a nettoyer aussi dans le le newNode

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
<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;
 
 
 
 
    sel = window.getSelection();
 
 
    var mySelectionhtml = sel.getRangeAt(0).cloneContents();
 
 
    var newNode = document.createElement("FONT");
    newNode.appendChild(mySelectionhtml);
    newNode.style.textShadow = "0px 0px 10px " + coul
    var f = newNode.getElementsByTagName("FONT");
    for (var i = 0; i < f.length; i++) {
        if (f[i].style.backgroundColor != null) {
            f[i].removeAttribute("style");
        }
        //if(!f[i].hasAttributes()){newNode.innerHTML=newNode.innerHTML.replace(f[i].outerHTML,f[i].innerHTML);}
    }
 
 
 
 
    // Test that the Selection object contains at least one Range
    if (sel.getRangeAt && sel.rangeCount) {
        // Get the first Range (only Firefox supports more than one)
        range = sel.getRangeAt(0);
        range.deleteContents();
 
 
 
 
        if (range.createContextualFragment) {
            fragment = range.createContextualFragment(newNode.outerHTML);
        }
        var firstInsertedNode = fragment.firstChild;
        var lastInsertedNode = fragment.lastChild;
        range.insertNode(fragment);
 
 
        if (firstInsertedNode) {
            range.setStartBefore(firstInsertedNode);
            range.setEndAfter(lastInsertedNode);
        }
        sel.removeAllRanges();
        sel.addRange(range);
 
 
    }
 
 
    document.getElementById('res').value = document.getElementById('comment').outerHTML;
}
    </script>
</head>
 
 
<body>
    <div id="comment" class="comment" contenteditable>
 
 
 
 
        <p>
            <font size="5">teste de
                <font style='text-shadow: 0px 0px 10px red;'><strong>te</strong></font>
                <font style="text-shadow: 0px 0px 10px blue;"><strong><font color="red"><em>xt</em>e</font></strong></font><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>
 
 
 
 
 
 
</body>
 
 
</html>

Ainsi chaque balise dont seule une partie est dans la sélection sera refermée, ce qui est nécessaire pour garder le formatage à gauche de la sélection... Maintenant ce qu'il faut savoir c'est que chaque balise fermée est ré-ouverte à l'intérieure de la sélection, là aussi c'est nécessaire pour garder le formatage de la partie du texte qui est à l'intérieur de la sélection...

tu oublie que la sélection est sensée être deletée et devrait au final ne contenir que l'emplacement et que ce qui est inséré n'est que le outerhtml de newNode
du moins je crois

[patricktoulon]

a oui !! j'ai fait le teste après délétion un alert sur sélection me redonne le innertext de la sélection

donc le renge .remove ou delete ne shunte que l’élément en mémoire mais pas pas dans le parent innerhtml pourtant quand on affiche le html du reste la sélection a bien disparue
c'est vraiment tordu comme truc

[Beginner.]

tu oublie que la sélection est sensée être deletée et devrait au final ne contenir que l'emplacement et que ce qui est inséré n'est que le outerhtml de newNode
du moins je crois

Elle est bel et bien supprimée mais le truc c'est qu’après comme tu dis tu inserts le outerhtml de newNode mais d'où vient le innerHTML de newNode ?

Le innerHTML de newNode est une copie de la sélection il contient donc les balises ré-ouvertes dont on a parlées...

Regarde c'est ce que tu fais là :

Code :

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

1
2
3
4
5
    sel = window.getSelection();
    var mySelectionhtml = sel.getRangeAt(0).cloneContents();
    var newNode = document.createElement("FONT");
    newNode.appendChild(mySelectionhtml); 

Après newNode.appendChild(mySelectionhtml); regarde le innerHTML de newNode avant et après le delete tu devrais voir les balises ré-ouvertes dans les deux cas car le delete supprime seulement la sélection sans toucher à la copie qui est indépendante...

Que tu fasses "delete + clonage" ou extracontent cela revient au même, le problème n'était pas là...

a oui !! j'ai fait le teste après délétion un alert sur sélection me redonne le innertext de la sélection

donc le renge .remove ou delete ne shunte que l’élément en mémoire mais pas pas dans le parent innerhtml pourtant quand on affiche le html du reste la sélection a bien disparue
c'est vraiment tordu comme truc

Ben cela suit une certaine logique comme on a vu...

[patricktoulon]

re
Bonjour beguinner

oulah!!non je ne m’arrête pas au appendchild de newnode je le retravaille et le nettoie

c'est ça visiblement que je n'arrive pas a mettre en place

quand j'ai mis la sélection dans newnode je supprime tout les shadow ca c'est ok

pour se faire
je verifie qu'il n'y a pas d'autre attribut dans le style comme background car ca on le garde
je verifie aussi qu'il n'y a pas d'autre attributs html comme color,zize,
si il n'y a pas d'autre attribut je replace le fragment par son innerhtml autrement dis la font devient un fragment de newnode

donc au final le innerhtml de newnode n'a plus rien a voir avec le html de la sélection du départ et je le travaille en string alors je risque pas d'avoir l'auto complétion du dom

c'est ca qui est ahurissant!!! quand je les retrouves dans le code a la fin ou dedans et vides alors que non seulement il sont deleté mais il n'existe plus en fait dans newnode

c'est comme si je sélectionnais et mettais un autre texte a la place

non il y a un truc que je pige pas qui se passe en arrière plan dans le dom par rapport a la selection

comme si le dom considérait que ce que je remet a la place est simplement un morceau a ce qui a été enlevé que j'aurais ajouté

hier j'ai retesté et 6 fois en plus en remplaçant la sélection par du code html qui n'utilise pas l'attribut style et tout est OK

il y a donc bien une corrélation avec le fait que le dom percoit mal l'attribut style

d’ailleurs fait le teste tu verra
avec mon dernier exemple au lieu d'utiliser la sélection met du code html avec style css dans newnode et teste la même chose mais sans style avec color,size fontname ou même les trois tu verra il n'y a pas de soucis

[Beginner.]

oulah!!non je ne m’arrête pas au appendchild de newnode je le retravaille et le nettoie

Oui je sais bien que tu le retravailles mon but était d'expliquer que ce que tu retravailles contient des balises auxquelles tu n'as peut-être pas pensé, à savoir les balises ré-ouvertes...

je verifie qu'il n'y a pas d'autre attribut dans le style comme background car ca on le garde

Je ne peux pas tester sur IE il déconne chez moi alors j'aimerais savoir si pour le background il utilise la même balise que pour les autres formatages, est-ce qu'il utilise la balise <font> ou<span> ou autre chose...?

c'est ca qui est ahurissant!!! quand je les retrouves dans le code a la fin ou dedans et vides alors que non seulement il sont deleté mais il n'existe plus en fait dans newnode

Tu es sûr qu'il n'existe plus dans le newnode ? Est-ce que avant l'insertion tu as bien le résultat souhaité dans la newnode ? Tu vérifies avec la console ?

Peux-tu me donner un exemple concret pour que je vérifie ça ?

[patricktoulon]

non pour le background l'avantage de travailler avec execcommand comme pour tout les attributs sauf le textshadow bien evidement c'est que jamais le background se place dans dans un font stylé en css donc de ce coté pas de soucis

je viens de le terminer il reste des "</strong><strong>" de temps en temps il faut dire que dans mon exemple j'ai chargé la complexité aussi
mais sinon ca match

voila la version complète
bien dommage que tu ne puisse pas tester avec IE cela dit pour les autres explorateur il ne doit pas trop y avoir de gros changements

il y a plusieur boucle for car on ne peut pas tout faire en même temps il y a un ordre a respecter pour les replace
dans la demo ci dessous tu a 2 textarea un pour le résultat un qui t'affiche comment le newnode est comme ca tu peut voir

a un moment donné je me sert du string du html et non du dom cette opération m'est refusé par le dom visiblement

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
 
 
<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 mySelectionhtml  =sel.getRangeAt(0).cloneContents(); 
var newNode  = document.createElement("FONT");
newNode.appendChild(mySelectionhtml);
   newNode.style.textShadow="0px 0px 10px " +coul    
var f=newNode.getElementsByTagName("FONT");
for(var i=0;i<f.length;i++){
if (f[i].style.backgroundColor!=null){
f[i].removeAttribute("style");}
if(!f[i].innerText){f[i].parentElement.removeChild(f[i]);}
}
str=newNode.innerHTML;
var f=newNode.getElementsByTagName("FONT");
for(var i=0;i<f.length;i++){
if(!f[i].hasAttributes()){str=str.replace(f[i].outerHTML,f[i].innerHTML);}
}
newNode.innerHTML=str;
var elements=newNode.getElementsByTagName("*") 
for(var i=0;i<elements.length;i++){
if (!elements[i].innerText){elements[i].parentElement.removeChild(elements[i]);}
}
document.getElementById('innernewnode').value=" code  de newnode  :" +newNode.outerHTML;
 
 
  if (sel.getRangeAt && sel.rangeCount) {
                        range = sel.getRangeAt(0);
            range.deleteContents();
 
            if (range.createContextualFragment) {
                            fragment = range.createContextualFragment(newNode.outerHTML);
            } 
            var firstInsertedNode = fragment.firstChild;
            var lastInsertedNode = fragment.lastChild;
            range.insertNode(fragment);
 
                if (firstInsertedNode) {
                    range.setStartBefore(firstInsertedNode);
                    range.setEndAfter(lastInsertedNode);
                }
                sel.removeAllRanges();
                sel.addRange(range);
 
        }
 
document.getElementById('res').value=document.getElementById('comment').outerHTML;
}
 
 
</script>
</head>
<body>
    <div id="comment" class="comment" contenteditable>
 
 
 
<p><font size="5">teste de <font style='text-shadow: 0px 0px 10px red;'><strong>te</strong></font><font style="text-shadow: 0px 0px 10px blue;"><strong><font color="red"><em>xt</em>e</font></strong></font><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]

Difficile de suivre tes discussions décidément
Néanmoins :

tout ce qui est color,size,bold,italic,underline,strike,itre(H),liste ordonnées ,liste non ordonnée ,etc... fonctionne parfaitement bien

là je suis bien d'accord avec toi, pour tous les styles gérés nativement par execCommand le travail est plutôt très bien fait même si les amoureux de la sémantique pourront tiquer sur le <strong> VS <b> ou autre <em> VS <i>. Je mettrais toutefois un bémol pour <font> qui est une balise « deprecated » depuis pas mal de temps.

Concernant tes remarques sur le DOM, il serait temps que tu arrêtes de le décrier et que tu essaies de comprendre comment il fonctionne et ce que tu peux faire avec les méthodes mises à disposition, presque tout.

Pour le traitement de la sélection, j"ai l'impression que tu te compliques la vie, sauf si tu veux rivaliser avec les milliers de lignes des éditeurs tel que CKEditor par exemple.

J'attaquerais de la façon suivante

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
  // récup. selection
  var oSelection = window.getSelection();
  // pointe sur la selection
  var oRange = oSelection.getRangeAt(0);
  // récup des noeuds de l'étendue range
  var oSelectedText = oRange.extractContents();
  // get conteneur commun
  var oParent = oRange.commonAncestorContainer;
  // création d'un élément neutre
  var oSpan = document.createElement('SPAN');
  // englobe le contenu dans le <span>
  oRange.surroundContents(oSpan);
  // ajout de la sélection en cours
  oSpan.appendChild(oSelectedText);

c'est du classique, à partir de là les modifications, l'ajout du <span>, sont visibles dans le document, le DOM à changé.

C'est maintenant que les choses peuvent devenir complexe, mais à peine.

La première chose à faire est de supprimer les styles correspondant à la modification en cours, dans tous les enfants du <span>.

Code :

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

1
2
3
4
5
  // suppression des text-shadow existants des enfants
  var children = oSpan.getElementsByTagName('SPAN');
  for (var i = 0; i < children.length; i++) {
    removeInlineStyle(children[i], 'text-shadow');
  }

...maintenant on place le style sur le <span>

Code :

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

1
2
3
  // style suivant le cas
  var style = ajout ? 'text-shadow: 0px 0px 10px ' + coul : 'text-shadow: none';
  setInlineStyle(oSpan, style);

A partir de maintenant tu as quelque chose qui tient la route mais avec possiblement des style en double et des éléments inutiles.

Il reste des choses à faire
• supprimer le style si celui du « parent » est le même

Code :

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

cleanInlineStyleNode(oSpan, oParent);

• faire le nettoyage et notamment supprimes les éléments <span> neutre, sans attribut style ou du même style inline que le parent

Code :

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

cleanNeutralElements( oEditor)

C'est un fait que c'est du travail sur le DOM mais qui te permettrais d'avoir un code « presque » propre.

Nota : on verra les fonctions plus tard si l'approche te convient et aussi parce que je sature un peu

[Beginner.]

non pour le background l'avantage de travailler avec execcommand comme pour tout les attributs sauf le textshadow bien evidement c'est que jamais le background se place dans dans un font stylé en css donc de ce coté pas de soucis

Ok tant mieux donc il utilise une balise <font> dédié au background... Je demande cela car sur Chrome c'est la balise <span> qui est utilisée...

Là je repense à ce que disait Loralina... Oui le fait que la méthode execCommand se comporte différemment selon le navigateur peut parfois poser problème...

Je vais tester ton code...

là je suis bien d'accord avec toi, pour tous les styles gérés nativement par execCommand le travail est plutôt très bien fait même si les amoureux de la sémantique pourront tiquer sur le <strong> VS <b> ou autre <em> VS <i>. Je mettrais toutefois un bémol pour <font> qui est une balise « deprecated » depuis pas mal de temps.

Oui effectivement et je saisis l’occasion pour rappeler ce que j'avais écrit ici : #23 au cas où cela intéresserait quelqu'un...

c'est du classique, à partir de là les modifications, l'ajout du <span>, sont visibles dans le document, le DOM à changé.

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

Je vais quand même regarder si le fonctionnement est le même... En particulier concernant le point que j'ai évoqué au message #71.

Il reste des choses à faire
• supprimer le style si celui du « parent » est le même

On pourrait aussi vérifier avant : si un des parents ("ancêtres") a déjà le style que l'on veut appliquer alors on n’exécute pas la fonction setInlineStyle(oSpan, style);...

[Beginner.]

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

Je vais quand même regarder si le fonctionnement est le même... En particulier concernant le point que j'ai évoqué au message #71.

Bon ben j'ai faits quelques tests...

Quand j'utilise juste la fonction surroundContents() (sans extractContents) cela ne fonctionne pas toujours, quand cela ne fonctionne pas, FF me dit ça :

InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable

Ce qui ne me dit pas grand chose ! Je veux dire que je ne comprends pas quel est le problème... Par contre Chrome est plus sympa, il me dit :

Uncaught DOMException: Failed to execute 'surroundContents' on 'Range': The Range has partially selected a non-Text node.

Et là je comprends mieux : on ne peut pas utiliser cette méthode si la sélection contient des balises qui ne sont pas entièrement comprises dans la sélection (partiellement sélectionnées, dont une partie se trouve à l’extérieur de la sélection).

L'usage de la fonction extractContents() (ou autre moyen équivalent) est donc nécessaire... Elle ré-ouvre (à l'extrémité gauche de la sélection) et/ou referme (à l'extrémité droite de la sélection) ces balises de sorte que le range ne contienne aucune balise partielle.

Du coup on en revient au problème évoqué au message #71 :

Ainsi chaque balise dont seule une partie est dans la sélection sera refermée, ce qui est nécessaire pour garder le formatage à gauche de la sélection... Maintenant ce qu'il faut savoir c'est que chaque balise fermée est ré-ouverte à l'intérieure de la sélection, là aussi c'est nécessaire pour garder le formatage de la partie du texte qui est à l'intérieur de la sélection...

Alors dés que tu fais une insertion tu retrouves ces balises ré-ouvertes et donc on se retrouve avec ces balises multipliés par deux...

Avec l'exemple c'est plus clair voir le message #71...

Mais bon comme je disais on peut quand même avec cela facilement supprimer un formatage spécifique mais il y aura une multiplication des balises partiellement sélectionnées...

Si par exemple avant l'insertion on supprime l'italique de la sélection on se retrouve avec :

before - this is <b><i>some text </i></b><b>[to show the</b> problem] - after

Ca marche mais on aurait aimé avoir :

before - this is <b><i>some text </i>[to show the</b> problem] - after

Ce serait donc un moyen assez simple de supprimer un formatage spécifique si la multiplication des balises ne gêne pas...

Cela rejoint ce que NoSmoking a proposé si on est pas trop exigeant...

Mais c'est vrai qu'à chaque fois on multiplie les balises par deux ce qui peut faire vraiment beaucoup si on utilise plusieurs fois le shadow, ce qui peut très bien être le cas car l'utilisateur n'a pas toujours (c'est même peut-être rarement le cas) le rendu souhaité du premier coup ...