Petit souci avec le coté visuel

**patricktoulon** · 15/02/2017, 20h43

Bonjour
j'ai soucis de zIndex je crois que j'arrive pas modifier

le div enfant du div content éditable dont je sélectionne le texte donc grosse bordure avec un genre de slashs ressort par dessus la palette couleur
voir démo
si quelqu'un avait une idée ca m'arrangerai
Nom : demo2.gif
Affichages : 220
Taille : 261,1 Ko

Nom : demo2.gif
Affichages : 220
Taille : 261,1 Ko

**Watilin** · 16/02/2017, 02h14

La bordure, étant dûe au mode édition, fait partie de l’UI du navigateur, son affichage n’est pas géré de la même façon que les éléments de la page. On avait le même problème avec d’anciennes versions de Flash.

Les solutions employées à l’époque étaient nombreuses et plus ou moins astucieuses. Les uns s’arrangeaient pour que leurs éléments ne recouvrent jamais l’objet problématique, quand d’autres masquaient temporairement l’objet, parfois même en le remplaçant par une image fantôme.

Je ne sais pas du tout ce que ça peut donner, mais dans un premier temps, essaye en désactivant temporairement le mode édition. Ça me paraît la solution la plus simple.

**patricktoulon** · 16/02/2017, 14h39

héhé!! Bonjour Watilin j'ai pensé a tout sauf a ca

je vais essayer mais j'ai peur que si je met content éditable false provisoirement je perde la sélection de texte

je rencontre tout ces petits soucis que je n'avais pas avant because la barre de bouton était dans une autre application
je vais essayer cela sinon j'en ai trouver une autre très simple moins propre

sélectionner
mémoriser le getrange
vider le range
focus palette couleur
sélectionner la couleur
recréer le range
appliquer la couleur

j'avais déjà glané sur le net cette astuce mais je vais essayer quand même le false du content éditable

Code html :

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
<head>
    <script type="text/javascript">
        var storedSelections = [];
        function StoreSelection () {
            if (window.getSelection) {
               //alert ( window.getSelection ().toString ());
  var currSelection = window.getSelection ();
                for (var i = 0; i < currSelection.rangeCount; i++) {
                    storedSelections.push (currSelection.getRangeAt (i));
   alert( window.getSelection().getRangeAt(0).extractContents().innerHTML );       
}
                currSelection.removeAllRanges ();
            } else {
                alert ("Your browser does not support this example!");
            }
        }
        function ClearStoredSelections () {
            storedSelections.splice (0, storedSelections.length);
        }
        function ShowStoredSelections () {
            if (window.getSelection) {
              
 var currSelection = window.getSelection ();
                currSelection.removeAllRanges ();
                for (var i = 0; i < storedSelections.length; i++) {
                    currSelection.addRange (storedSelections[i]);
                }
            } else {
                alert ("Your browser does not support this example!");
            }
        }
    </script>
</head>
<body>
    Select some content on this page and use the buttons below.<br /><br />
    <button onclick="StoreSelection ();">Store the selection</button>
    <button onclick="ClearStoredSelections ();">Clear stored selections</button>
    <button onclick="ShowStoredSelections ();">Show stored selections</button>
    <br /><br />
    <div>Some text <em>for </em>selection</div>
    <div><b>Some bold <i>text </i>for selection.</b></div>
</body>

**patricktoulon** · 16/02/2017, 14h53

Bon ben j'ai essayer et non ca ne l'enlève pas
j'ai bien le div editeur qui n'est plus éditable et donc tout ces div enfants aussi mais j'ai toujours les bordures

je pense effectivement que la il faut toucher a l'object Window mais je ne sais pas je n'est pas de piste

je pense que je vais être obligé d'utiliser l'astuce du getrange

**Beginner.** · 16/02/2017, 15h14

L'idée de Watilin me semble bonne, je ne vois pas pourquoi ça ne marcherait pas, peut-être que quelque chose m’échappe... Dans l'image on voit que tu peux déplacer la div éditable par dessus la palette mais ce déplacement à la base n'est possible que parce qu'on est en mode éditable, non ?

Envoyé par patricktoulon

j'ai bien le div editeur qui n'est plus éditable et donc tout ces div enfants aussi mais j'ai toujours les bordures

Sauf si ces div enfants sont eux-mêmes en mode édition (si par exemple ils ont un contenteEditable="true"), non ?

**patricktoulon** · 16/02/2017, 15h43

re bon ben j'ai essayé les deux idées et ca match pas
non les div enfants hérite de l'Edition par le parent"id=edieur"
pour etre sur j'ai déplacer la cration du div editeur en haut de fonction pour qu'il est in index le flus faible
voila ce que je fait pendant la creation du wysiwyg

je crée le bouton le "A avec le trait rouge en dessous"
une fois créé je lui ajoute son evenememt

pour etre sur je donne me le focus a un autre élément
jusque la ca marche

Code :

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

1
2
3
4
5
6
7
//******************************************** APEL LA palette couleur pour le FORECOLOR
if (barreg[i][e][1]=="createpalettecolor"){
bout.addEventListener("click", function() { modepal="forecolor";
StoreSelection ();//appelle la fonction de mémoration et de sectionne en même temps
document.getElementById("palette").style.visibility="visible";document.getElementById("ruban").focus();});
}//fin du if
//*****************************************fin d'appel de la palette couleur

creation de la palette couleur

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
/////////////////////////////////////////////////////////////////         CREATION DE LA PALETTE COULEUR
var pal=document.createElement("DIV");pal.className="palettecouleur";pal.style.zIndex="1";pal.id="palette";pal.style.visibility="hidden";
var btsupf=document.createElement("BUTTON");btsupf.innerText="supprimer la couleur";btsupf.className="rad";btsupf.style.width="100%";
btsupf.style.height="30px";
btsupf.addEventListener("click",function() {this.parentElement.style.visibility="hidden"; retirshadowcolor();});
 pal.appendChild(btsupf);
for (var c = 0; c < coul.length;c++) {
var bc=document.createElement("BUTTON");bc.id=coul[c];bc.classname="boutpalette";bc.style.backgroundColor="#"+bc.id;bc.style.height="15px";bc.style.width="14px";
bc.style.border=0;bc.style.margin="2px";
bc.addEventListener("click",function() {this.parentElement.style.visibility="hidden"; 
 
ShowStoredSelections();// je resectionne ICI!!!!!!
 
if(modepal == "forecolor"){execom("forecolor",false,this.style.backgroundColor); } 
if(modepal == "backcolor"){execom("backcolor",false,this.style.backgroundColor); } 
if(modepal == "shadowcolor"){shadowcolor(this.style.backgroundColor); } 
   });
pal.appendChild(bc);
}/// fin du for c
var btsupf=document.createElement("BUTTON");btsupf.innerText="fermer la palette";btsupf.className="rad";btsupf.style.width="100%";
btsupf.style.height="30px";
btsupf.addEventListener("click",function() {this.parentElement.style.visibility="hidden";});
 pal.appendChild(btsupf);
//pal.addEventListener("mouseout",inOUT,false);
document.getElementById("forecolor").parentElement.appendChild(pal)
/////////////////////////////////////////////////FIN DE CREATION DE LA PALETTE COULEUR