1. #61
    Expert éminent sénior
    Avatar de patricktoulon
    Profil pro
    Inscrit en
    avril 2009
    Messages
    8 862
    Détails du profil
    Informations personnelles :
    Âge : 47
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Secteur : Bâtiment

    Informations forums :
    Inscription : avril 2009
    Messages : 8 862
    Points : 14 498
    Points
    14 498
    Billets dans le blog
    1

    Par défaut re

    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
    mes fichiers dans les contributions:
    mail avec CDO en vba et mail avec CDO en vbs dans un HTA
    survol des bouton dans userform
    prendre un cliché d'un range

    si ton problème est résolu n'oublie pas de pointer : résolu: ça peut servir aux autres
    et n'oublie pas de voter

  2. #62
    Membre expert Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    juin 2010
    Messages
    2 071
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 28
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : juin 2010
    Messages : 2 071
    Points : 3 979
    Points
    3 979

    Par défaut

    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…
    La FAQ JavaScript – Les cours JavaScript – Mon terrain de jeu préféré ? Greasemonkey.
    La touche F12 : l’outil indispensable à tout développeur JavaScript !

  3. #63
    Membre régulier
    Femme Profil pro
    Autre
    Inscrit en
    janvier 2017
    Messages
    49
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Autre

    Informations forums :
    Inscription : janvier 2017
    Messages : 49
    Points : 79
    Points
    79

    Par défaut

    Bonjour,
    Je n'ai pas suivi la suite de la conversation, mais par rapport à ceci :
    Citation Envoyé par NoSmoking Voir le message
    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.

  4. #64
    Expert éminent sénior
    Avatar de patricktoulon
    Profil pro
    Inscrit en
    avril 2009
    Messages
    8 862
    Détails du profil
    Informations personnelles :
    Âge : 47
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Secteur : Bâtiment

    Informations forums :
    Inscription : avril 2009
    Messages : 8 862
    Points : 14 498
    Points
    14 498
    Billets dans le blog
    1

    Par défaut re

    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
    mes fichiers dans les contributions:
    mail avec CDO en vba et mail avec CDO en vbs dans un HTA
    survol des bouton dans userform
    prendre un cliché d'un range

    si ton problème est résolu n'oublie pas de pointer : résolu: ça peut servir aux autres
    et n'oublie pas de voter

  5. #65
    Expert éminent sénior
    Avatar de patricktoulon
    Profil pro
    Inscrit en
    avril 2009
    Messages
    8 862
    Détails du profil
    Informations personnelles :
    Âge : 47
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Secteur : Bâtiment

    Informations forums :
    Inscription : avril 2009
    Messages : 8 862
    Points : 14 498
    Points
    14 498
    Billets dans le blog
    1

    Par défaut re

    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é
    mes fichiers dans les contributions:
    mail avec CDO en vba et mail avec CDO en vbs dans un HTA
    survol des bouton dans userform
    prendre un cliché d'un range

    si ton problème est résolu n'oublie pas de pointer : résolu: ça peut servir aux autres
    et n'oublie pas de voter

  6. #66
    Membre éclairé
    Homme Profil pro
    Inscrit en
    octobre 2011
    Messages
    774
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : octobre 2011
    Messages : 774
    Points : 875
    Points
    875

    Par défaut

    Citation Envoyé par Loralina Voir le message
    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...


    Citation Envoyé par Loralina Voir le message
    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...

  7. #67
    Membre régulier
    Femme Profil pro
    Autre
    Inscrit en
    janvier 2017
    Messages
    49
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Autre

    Informations forums :
    Inscription : janvier 2017
    Messages : 49
    Points : 79
    Points
    79

    Par défaut

    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.

  8. #68
    Expert éminent sénior
    Avatar de patricktoulon
    Profil pro
    Inscrit en
    avril 2009
    Messages
    8 862
    Détails du profil
    Informations personnelles :
    Âge : 47
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Secteur : Bâtiment

    Informations forums :
    Inscription : avril 2009
    Messages : 8 862
    Points : 14 498
    Points
    14 498
    Billets dans le blog
    1

    Par défaut re

    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
    mes fichiers dans les contributions:
    mail avec CDO en vba et mail avec CDO en vbs dans un HTA
    survol des bouton dans userform
    prendre un cliché d'un range

    si ton problème est résolu n'oublie pas de pointer : résolu: ça peut servir aux autres
    et n'oublie pas de voter

  9. #69
    Expert éminent sénior
    Avatar de patricktoulon
    Profil pro
    Inscrit en
    avril 2009
    Messages
    8 862
    Détails du profil
    Informations personnelles :
    Âge : 47
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Secteur : Bâtiment

    Informations forums :
    Inscription : avril 2009
    Messages : 8 862
    Points : 14 498
    Points
    14 498
    Billets dans le blog
    1

    Par défaut re

    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
    mes fichiers dans les contributions:
    mail avec CDO en vba et mail avec CDO en vbs dans un HTA
    survol des bouton dans userform
    prendre un cliché d'un range

    si ton problème est résolu n'oublie pas de pointer : résolu: ça peut servir aux autres
    et n'oublie pas de voter

  10. #70
    Expert éminent sénior
    Avatar de patricktoulon
    Profil pro
    Inscrit en
    avril 2009
    Messages
    8 862
    Détails du profil
    Informations personnelles :
    Âge : 47
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Secteur : Bâtiment

    Informations forums :
    Inscription : avril 2009
    Messages : 8 862
    Points : 14 498
    Points
    14 498
    Billets dans le blog
    1

    Par défaut re

    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é

    Nom : demo2.gif
Affichages : 36
Taille : 790,5 Ko
    mes fichiers dans les contributions:
    mail avec CDO en vba et mail avec CDO en vbs dans un HTA
    survol des bouton dans userform
    prendre un cliché d'un range

    si ton problème est résolu n'oublie pas de pointer : résolu: ça peut servir aux autres
    et n'oublie pas de voter

  11. #71
    Membre éclairé
    Homme Profil pro
    Inscrit en
    octobre 2011
    Messages
    774
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : octobre 2011
    Messages : 774
    Points : 875
    Points
    875

    Par défaut

    Salut,

    Citation Envoyé par patricktoulon Voir le message
    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)...

    Citation Envoyé par patricktoulon Voir le message
    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...


    Citation Envoyé par patricktoulon Voir le message
    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...

  12. #72
    Expert éminent sénior
    Avatar de patricktoulon
    Profil pro
    Inscrit en
    avril 2009
    Messages
    8 862
    Détails du profil
    Informations personnelles :
    Âge : 47
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Secteur : Bâtiment

    Informations forums :
    Inscription : avril 2009
    Messages : 8 862
    Points : 14 498
    Points
    14 498
    Billets dans le blog
    1

    Par défaut re

    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
    mes fichiers dans les contributions:
    mail avec CDO en vba et mail avec CDO en vbs dans un HTA
    survol des bouton dans userform
    prendre un cliché d'un range

    si ton problème est résolu n'oublie pas de pointer : résolu: ça peut servir aux autres
    et n'oublie pas de voter

  13. #73
    Expert éminent sénior
    Avatar de patricktoulon
    Profil pro
    Inscrit en
    avril 2009
    Messages
    8 862
    Détails du profil
    Informations personnelles :
    Âge : 47
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Secteur : Bâtiment

    Informations forums :
    Inscription : avril 2009
    Messages : 8 862
    Points : 14 498
    Points
    14 498
    Billets dans le blog
    1

    Par défaut re

    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
    mes fichiers dans les contributions:
    mail avec CDO en vba et mail avec CDO en vbs dans un HTA
    survol des bouton dans userform
    prendre un cliché d'un range

    si ton problème est résolu n'oublie pas de pointer : résolu: ça peut servir aux autres
    et n'oublie pas de voter

  14. #74
    Membre éclairé
    Homme Profil pro
    Inscrit en
    octobre 2011
    Messages
    774
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : octobre 2011
    Messages : 774
    Points : 875
    Points
    875

    Par défaut

    Citation Envoyé par patricktoulon Voir le message

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

    Citation Envoyé par patricktoulon Voir le message
    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...

  15. #75
    Expert éminent sénior
    Avatar de patricktoulon
    Profil pro
    Inscrit en
    avril 2009
    Messages
    8 862
    Détails du profil
    Informations personnelles :
    Âge : 47
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Secteur : Bâtiment

    Informations forums :
    Inscription : avril 2009
    Messages : 8 862
    Points : 14 498
    Points
    14 498
    Billets dans le blog
    1

    Par défaut re

    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
    mes fichiers dans les contributions:
    mail avec CDO en vba et mail avec CDO en vbs dans un HTA
    survol des bouton dans userform
    prendre un cliché d'un range

    si ton problème est résolu n'oublie pas de pointer : résolu: ça peut servir aux autres
    et n'oublie pas de voter

  16. #76
    Membre éclairé
    Homme Profil pro
    Inscrit en
    octobre 2011
    Messages
    774
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : octobre 2011
    Messages : 774
    Points : 875
    Points
    875

    Par défaut

    Citation Envoyé par patricktoulon Voir le message
    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...

    Citation Envoyé par patricktoulon Voir le message
    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...?



    Citation Envoyé par patricktoulon Voir le message

    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 ?

  17. #77
    Expert éminent sénior
    Avatar de patricktoulon
    Profil pro
    Inscrit en
    avril 2009
    Messages
    8 862
    Détails du profil
    Informations personnelles :
    Âge : 47
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Secteur : Bâtiment

    Informations forums :
    Inscription : avril 2009
    Messages : 8 862
    Points : 14 498
    Points
    14 498
    Billets dans le blog
    1

    Par défaut re

    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>
    Nom : demo2.gif
Affichages : 28
Taille : 1,16 Mo
    mes fichiers dans les contributions:
    mail avec CDO en vba et mail avec CDO en vbs dans un HTA
    survol des bouton dans userform
    prendre un cliché d'un range

    si ton problème est résolu n'oublie pas de pointer : résolu: ça peut servir aux autres
    et n'oublie pas de voter

  18. #78
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    11 397
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 11 397
    Points : 24 251
    Points
    24 251

    Par défaut

    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

  19. #79
    Membre éclairé
    Homme Profil pro
    Inscrit en
    octobre 2011
    Messages
    774
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : octobre 2011
    Messages : 774
    Points : 875
    Points
    875

    Par défaut extractContents() + appendChild() + insertNode()

    Citation Envoyé par patricktoulon Voir le message
    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...

    Citation Envoyé par NoSmoking Voir le message
    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...

    Citation Envoyé par NoSmoking Voir le message
    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.

    Citation Envoyé par NoSmoking Voir le message

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

  20. #80
    Membre éclairé
    Homme Profil pro
    Inscrit en
    octobre 2011
    Messages
    774
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : octobre 2011
    Messages : 774
    Points : 875
    Points
    875

    Par défaut

    Citation Envoyé par Beginner. Voir le message
    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...

    Citation Envoyé par Beginner. Voir le message
    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 ...

+ Répondre à la discussion
Cette discussion est résolue.
Page 4 sur 13 PremièrePremière 12345678 ... DernièreDernière

Discussions similaires

  1. SimpleXML et recherche d'un élément par son attribut
    Par Tutotictac dans le forum SimpleXML
    Réponses: 2
    Dernier message: 28/03/2009, 16h39
  2. Comment remplacer un resultat numérique par son libellé ?
    Par bds2006 dans le forum Bases de données
    Réponses: 3
    Dernier message: 16/06/2006, 11h03
  3. [XSLT ]remplacement d un caractere par son code
    Par luta dans le forum XSL/XSLT/XPATH
    Réponses: 3
    Dernier message: 02/09/2005, 16h26
  4. Réponses: 2
    Dernier message: 10/05/2004, 11h20

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo