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 : 193
Taille : 261,1 Ko

Nom : demo2.gif
Affichages : 193
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

quand je fait la même chose a la main ca match mais par fonction non:

????

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

Quand tu enlèves le mode édition est-ce que tu peux toujours déplacer la div éditable par dessus la palette comme on le voit ?

**Beginner.** · 16/02/2017, 16h12

J'ai essayé de tester tes codes mais il manque des choses comme le tableau des couleurs coul et le CSS...

**patricktoulon** · 16/02/2017, 16h48

re
et oui je pouvais pas le donner comme ca il y avait trop de données perso dedans
je l'ai donc épuré et mis un coup de beautyfier indenter
le voila complet

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
<!doctype html5>
<html lang="fr">
 
<head>
    <!meta charset="utf-8">
    <title>patrick WYSIWYG html </title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
    <style>
        body {
            width: 100%;
            height: 100%;
            margin-top: 0;
        }
        
        #ruban {
            min-width: 800px;
            float: left;
            margin: 0;
            HEIGHT: 70px;
            Width: 99%;
            border: 1px solid #657D89;
            background-color: #ACC3CB;
        }
        
        .CMB {
            border-radius: 4px;
            border: 1px solid #607F94;
            background-color: #E0E0E0;
            HEIGHT: 59px;
            Margin-Top: 3px;
            float: left;
            Margin-Left: 3px;
        }
        
        .palettecouleur {
            position: relative;
            font-size: 0;
            margin-top: -10px;
            HEIGHT: 214px;
            width: 145px;
            border: 1px solid #607F94;
            position: relative;
            z-index: 23;
            background-color: #ACC3CB;
        }
        
        #editeur {
            width: 99%;
            height: 85%;
            border: 1px solid black;
            overflow: auto
        }
        
        .labtitre {
            margin-top: 0;
            color: #C6F2E8;
            width: 100%;
            height: 35px;
            border: 1px solid #607F94;
            background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 0%, rgba(66, 137, 178, 0.65) 69%);
        }
        
        #editeur:hover .palettecouleur {
            visibility: hidden;
        }
        
        .selects {
            margin-top: -10px;
            background-color: #ACC3CB;
            position: relative;
            z-index: 23;
            width: 150px;
            font-size: 15px;
        }
        
        .rad {
            color: #086A87;
            border-radius: 4px;
            BORDER-TOP: #607f94 0.1pt solid;
            HEIGHT: 100%;
            BORDER-RIGHT: #607f94 0.1pt solid;
            WIDTH: 100%;
            BORDER-BOTTOM: #607f94 0.1pt solid;
            BORDER-LEFT: #607f94 0.1pt solid;
            background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 0%, rgba(149, 171, 185, 0.65) 69%);
        }
        
        .rad:hover {
            background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 0%, rgba(66, 137, 178, 0.65) 69%);
            color: white;
        }
        
        .Frad {
            HEIGHT: 26px;
            WIDTH: 26px;
            float: left;
            margin-left: 3px;
            margin-top: 2px;
            display: inline;
        }
        
        .Frad:focus .palettecouleur {
            visibility: visible;
        }
        
        .btclose {
            width20px;
            height: 20px;
            background-color: gray;
            color: red;
            float: right;
            margin: 2px;
        }
        
        .btclose:hover {
            background-color: red;
            color: gray;
        }
        
        p {
            margin: 0;
        }
        
        .selects OPTION:hover {
            background-color: red;
        }
    </style>
    <script type="text/javascript">
        //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
        var ed;
        var DX, DY, oX, oY, fX, fY;
        var newparent;
        var oldparent;
        var dragged;
        var bordure;
        var code;
        var actifelem;
        var modepal
        var storedSelections = [];
        //typeof window.addEventListener == 'undefined' ? document.attachEvent("onmousemove",WhereMouse) : document.addEventListener('mousemove',WhereMouse,false);
        //typeof window.addEventListener == 'undefined' ? document.attachEvent("onmouseup",drag_onmouseup) : document.addEventListener('mouseup',drag_onmouseup,false);
        document.addEventListener('mousemove', WhereMouse, false);
        document.addEventListener('mouseup', drag_onmouseup, false);
        document.addEventListener('mousedown', Mdown, false);
        ////////////////////////////////////////////////////////////////////////////////////////////
        function choix_dossier() {
            var objShell = new ActiveXObject("Shell.Application");
            var ssfWINDOWS = 0;
            var objFolder;
            objFolder = objShell.BrowseForFolder(0, "Choir le dossier", 1, ssfWINDOWS);
            if (objFolder != null) {
                alert(objFolder.self.Path);
                // Add code here.
            }
        }
        ///////////////////////////////////////////////////////////////////////////////////////////
        function saveas() {
            var oPrntWin = window.open("", "_blank", "width=1,height=1,left=1,top=1,menubar=yes,toolbar=yes,resizable=yes,location=no,scrollbars=yes");
            oPrntWin.document.open();
            oPrntWin.document.write(editeur.innerHTML);
            oPrntWin.document.execCommand("SaveAs", true, "C:\\My Documents\\entrez un nom ici.html");
            oPrntWin.close();
        }
        ////////////////////////////////////////////////////////////////////////////////////////////
        function Mdown() {
            //alert(document.activeElement.outerHTML);
            if (document.activeElement.className == "divint") {
                actifelem = document.activeElement;
            }
        }
        //////////////////////////////////////////////////////////////////////////////////////////////
        function drag_onmouseup(ev)
        {
            if (dragged != null) {
                actifelem = dragged
                dragged.style.border = bordure;
                var rect = dragged.getBoundingClientRect();
                oX = rect.left - 9;
                oY = rect.top - 1;
                newparent = document.elementFromPoint(oX, oY);
                if (newparent != null && oldparent.id != newparent.id) {
                    if (newparent.tagName != "DIV") {
                        do {
                            newparent = newparent.parentElement;
                        } while (newparent.tagName !== 'DIV' && newparent !== document.body);
                    } //on boucle jusqu'au premier div  ou au body 
                    if (newparent === document.body) {
                        newparent = document.getElementById('editeur');
                    } //si c'est le body alors c'est l'editeur
 
 
                    if (newparent.offsetTop < document.getElementById('editeur').offsetTop) {
                        newparent = document.getElementById('editeur');
                        var re = 1;
                    }
 
                    newparent.appendChild(dragged);
                    dragged.style.border = bordure;
                    var rP = newparent.getBoundingClientRect();
                    var rX = ev.clientX - rP.left;
                    var rY = ev.clientY - rP.top;
                    dragged.style.left = rX - fX + "px";
                    dragged.style.top = rY - fY + "px";
                    if (re == 1) {
                        dragged.style.top = document.getElementById('editeur').offsetTop + 10 + "px";
                        var re = 0;
                    }
                    if (dragged.style.top < 10) {
                        dragged.style.top = 10 + "px";
                    }
                    oldparent = null;
                    newparent = null;
                }
                dragged = null;
            }
        } //On arrête le drag}
        ////////////////////////////////////////////////////////////////////////////FONCTION QUI DEMARRE LE DRAG //////////////////////////////////////////////////////////
        function dragstart(ev) {
            ev = ev || event;
            target = ev.target || ev.srcElement;
            if (target.tagName == "DIV" || target.tagName == "IMG") {
 
                dragged = target;
                bordure = dragged.style.border;
                oldparent = dragged.parentElement;
                dragged.style.border = "2px dotted #8258FA";
                fX = ev.offsetX;
                fY = ev.offsetY;
                X = ev.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft);
                Y = ev.clientY + (document.documentElement.scrollTop + document.body.scrollTop);
                DX = 0;
                DY = 0;
                DX = X - dragged.offsetLeft;
                DY = Y - dragged.offsetTop;
                ev.stopPropagation();
                ev.returnValue = false;
                if (ev.preventDefault) ev.preventDefault();
            } else {
                dragged = null;
                ev.returnValue = false;
            }
        }
 
        ///////////////////////////////////////////////////////////////////FONCTION QUI DEPLACE LE DIV //////////////////////////////////////////////////////////////
        function WhereMouse(ev)
        {
            if (dragged != null) {
                Mouse_X = ev.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft);
                Mouse_Y = ev.clientY + (document.documentElement.scrollTop + document.body.scrollTop);
                Mouse_X -= DX;
                Mouse_Y -= DY;
                dragged.style.left = Mouse_X + 'px';
                dragged.style.top = Mouse_Y + 'px';
                dragged.style.position = "absolute";
            }
        }
        //********************************************************************************************************************************
        //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
        function selectionne_text() {
            return window.getSelection().getRangeAt(0);
        }
        ////////////////////////////////////////////////////////////////////////////////
        function StoreSelection() {
            if (window.getSelection) {
                var currSelection = window.getSelection();
                for (var i = 0; i < currSelection.rangeCount; i++) {
                    storedSelections.push(currSelection.getRangeAt(i));
                }
                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!");
            }
        }
        ////////////////////////////////////////////////
 
        function adddragtodiv() {
            var Element = document.all;
            for (var i = 0; i < Element.length; i++) {
                if (Element[i].tagName == "DIV" || Element[i].tagName == "IMG") {
                    Element[i].addEventListener("dragstart", dragstart, false);
                }
            }
        }
 
        ////////////////////////////////////////////////////////////////////////////////////
        function shadowcolor(coul) {
            if (selectionne_text()) {
                var selection = selectionne_text();
                var selectedText = selection.extractContents();
                var balisefont = document.createElement("FONT");
                balisefont.className = "shado";
                balisefont.appendChild(selectedText);
                var strbal = balisefont.innerHTML;
                var colhtml = balisefont.getElementsByTagName("font");
                if (colhtml.length > 0) {
                    for (var i = 0; i < colhtml.length; i++) {
                        var strinnerT = colhtml[i].innerHTML;
                        var str = colhtml[i].outerHTML;
                        var deb = "class=" + str.split("class=")[1];
                        var fin = deb.split(">")[0];
                        var str2 = str.replace(fin, "");
                        var bal = str2.substring(0, 7);
                        if (bal == "<font >") {
                            var strbal = strbal.replace(str, strinnerT);
                        }
                        if (bal != "<font >") {
                            var strbal = strbal.replace(fin, "");
                        }
                        // if( colhtml[i].innerHTML==""){ var strbal=strbal.replace(str,"");}
                    }
                }
                balisefont.innerHTML = strbal;
                balisefont.style.textShadow = "0px 0px 10px " + coul;
                selection.insertNode(balisefont);
            } //fin du if selectionnetext
            //nettoyage();
        } //fin de fonction shado
 
        //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
        function retirshadowcolor() {
            if (selectionne_text()) {
                var selection = selectionne_text();
                var selectedText = selection.extractContents();
                var balisefont = document.createElement("FONT");
                balisefont.className = "shado";
                balisefont.appendChild(selectedText);
                var strbal = balisefont.innerHTML;
                var colhtml = balisefont.getElementsByTagName("font");
                if (colhtml.length > 0) {
                    for (var i = 0; i < colhtml.length; i++) {
                        var strinnerT = colhtml[i].innerHTML;
                        var str = colhtml[i].outerHTML;
                        var deb = "class=" + str.split("class=")[1];
                        var fin = deb.split(">")[0];
                        var str2 = str.replace(fin, "");
                        var bal = str2.substring(0, 7);
                        if (bal == "<font >") {
                            var strbal = strbal.replace(str, strinnerT);
                        }
                        if (bal != "<font >") {
                            var strbal = strbal.replace(fin, "");
                        }
                        // if( colhtml[i].innerHTML==""){ var strbal=strbal.replace(str,"");}
                    }
                }
                alert(strbal);
                strbal = strbal.replace("</strong><strong>", "");
                strbal = strbal.replace("</em><em>", "");
                strbal = strbal.replace("</strong><strong>", "");
                alert(strbal);
                balisefont.innerHTML = strbal;
 
                selection.insertNode(balisefont);
            } //fin du if selectionnetext
            nettoyage();
        } //fin de fonction 
        //////////////////////////////////////////////////////////////
        function nettoyage() {
            var editeur = document.getElementById("editeur");
            var mestag = ["em", "strong", "font"];
            for (var i = 0; i < mestag.length; i++) {
                var elements = editeur.getElementsByTagName(mestag[i]);
                for (var e = 0; e < elements.length; e++) {
                    var par = elements[e].parentElement;
                    if (elements[e].innerText == "") {
                        par.removeChild(elements[e])
                    }
                } //fin de boucle for mestag
            } //fin de boucle for elements
 
 
        } // fin de fonction
        ////////////////////////////////////////////////
        /////////////////////////////////////////////////////////////////////////////////////////////////////
        function insertdiv() {
            var divid = "div" + document.getElementsByTagName("div").length;
            var ed = document.getElementById('editeur');
            var selection = selectionne_text();
            var selectedText = selection.extractContents();
            var balise = document.createElement('div');
            balise.style.borderRadius = "6%";
            balise.style.border = "1px solid black";
            balise.style.width = "200px";
            balise.style.height = "200px";
            balise.className = "divint";
            balise.id = divid;
            //balise.Style.WordWrap = "break-word";
            actifelem = balise;
            //si il y a du texte sélectionné  on englobe le texte avec le div             
            if (selection.length != 0) {
                balise.appendChild(selectedText);
                selection.insertNode(balise);
            }
            //si on englobe pas du texte le div est hors du flux (absolute )
            if (selection == "") {
                balise.style.position = "absolute";
                balise.appendChild(document.createElement('p'));
                ed.appendChild(balise);
            }
            ed.appendChild(document.createElement('p'));
            document.getElementById(divid).addEventListener("dragstart", dragstart, false);
            document.getElementById(divid).style.zIndex = "0"
        }
        /////////////////////////////////////////////////////////////////////////////////////////////////////////
        function InsertImg() {
            try {
                fichier.click();
                var Data = fichier.value;
                //alert(Data);
                if (Data != "") {
                    var ids = "image" + document.getElementsByTagName("img").length + 1;
                    var selection = selectionne_text();
                    var selectedText = selection.extractContents();
                    var baliseimg = document.createElement("img");
                    baliseimg.appendChild(selectedText);
                    baliseimg.src = Data;
                    baliseimg.id = ids;
                    baliseimg.className = "image";
 
                    baliseimg.onDragStart = "return false";
                    baliseimg.onMouseDown = "return false";
                    selection.insertNode(baliseimg);
                    document.getElementById(ids).width = 300;
                    if (document.getElementById(ids).parentElement.id != "editeur") {
                        document.getElementById("editeur").appendChild(document.getElementById(ids));
                    }
                    document.getElementById(ids).addEventListener("dragstart", dragstart, false);
                }
            } catch (e) {
                alert("Vous devez vous placer sur l'éditeur!");
            };
        }
        /////////////////////////////////////////////////////////////////////////////////
        function borduresize(siz) {
            try {
                if (siz.value != "grosseur du trait") {
                    if (actifelem.className == "divint") {
                        actifelem.style.borderWidth = siz.value + "px";
                    }
                }
            } catch (e) {
                alert("vous devez d'abords selectionner un div a l'interieur de l'editeur ");
            };
            //console.error(e)
            siz.selectedIndex = "0";
        }
        /////////////////////////////////////////////////////////////////////////////////
        var bold = ["rad", "excecommand", "bold", false, "Null", "C:/Users/polux/Desktop/BOUTON WIG/bold.gif"];
        var italic = ["rad", "excecommand", "italic", false, "Null", "C:/Users/polux/Desktop/BOUTON WIG/italic.gif"];
        var underline = ["rad", "excecommand", "underline", false, "Null", "C:/Users/polux/Desktop/BOUTON WIG/underline.gif"];
        var strike = ["rad", "excecommand", "Strikethrough", false, "Null", "C:/Users/polux/Desktop/BOUTON WIG/strike.gif"];
        var Fontsize = ["rad", "createlistefontsize", "Fontsize", , "createlistefontsize", "C:/Users/polux/Desktop/BOUTON WIG/fontsize.gif"];
        var font = ["rad", "createlistfont", "fontname", , "createlistfont", "C:/Users/polux/Desktop/BOUTON WIG/font.gif"];
        var formatBlock = ["rad", "createlisttitre", "formatBlock", , "this.value", "C:/Users/polux/Desktop/BOUTON WIG/formatblock.gif"];
        var justufyleft = ["rad", "excecommand", "justifyleft", false, "Null", "C:/Users/polux/Desktop/BOUTON WIG/justifyleft.gif"];
        var justifycenter = ["rad", "excecommand", "justifycenter", false, "Null", "C:/Users/polux/Desktop/BOUTON WIG/justifycenter.gif"];
        var Justifyright = ["rad", "excecommand", "justifyright", false, "Null", "C:/Users/polux/Desktop/BOUTON WIG/justifyright.gif"];
        var indent = ["rad", "excecommand", "indent", false, "Null", "C:/Users/polux/Desktop/BOUTON WIG/indent.gif"];
        var oudent = ["rad", "excecommand", "outdent", false, "Null", "C:/Users/polux/Desktop/BOUTON WIG/outdent.gif"];
        var insertunorderedlist = ["rad", "excecommand", "insertunorderedlist", false, "Null", "C:/Users/polux/Desktop/BOUTON WIG/insertunorderedlist.gif"];
        var insertorderedlist = ["rad", "excecommand", "insertorderedlist", false, "Null", "C:/Users/polux/Desktop/BOUTON WIG/insertorderedlist.gif"];
        var color = ["rad", "createpalettecolor", "forecolor", false, "createpalette", "C:/Users/polux/Desktop/BOUTON WIG/color.gif"];
        var backcolor = ["rad", "createpaletteback", "backcolor", false, "createpalette", "C:/Users/polux/Desktop/BOUTON WIG/backcolor.gif"];
        var textshadowcolor = ["rad", "shadowcolor", "shadowcolor", "argmt", "Null", "C:/Users/polux/Desktop/BOUTON WIG/textshadowcolor.gif"];
        var RemoveFormat = ["rad", "excecommand", "RemoveFormat", false, "Null", "C:/Users/polux/Desktop/BOUTON WIG/RemoveFormat.gif"];
        var link = ["rad", "excecommand", "createLink", false, "Null", "C:/Users/polux/Desktop/BOUTON WIG/linck.gif"];
        var unlink = ["rad", "excecommand", "unlink", false, "Null", "C:/Users/polux/Desktop/BOUTON WIG/unlinck.gif"];
        var insertimg = ["rad", "insertimg", "insertimg", "fichier", "Null", "C:/Users/polux/Desktop/BOUTON WIG/insertimg.gif"];
        var ajoutdiv = ["rad", "insertdiv", , , , "C:/Users/polux/Desktop/BOUTON WIG/ajoutdiv.gif"];
        var inserttable = ["rad", "rien", "insertable", , , "C:/Users/polux/Desktop/BOUTON WIG/inserttable.gif"];
        var newdoc = ["rad", "nouveaudoc", "new document", , , "C:/Users/polux/Desktop/BOUTON WIG/nouveaudoc.GIF"]
        var dossier = ["rad", "menudossier", "choisir le dossier", , , "C:/Users/polux/Desktop/BOUTON WIG/dossier.GIF"]
        var coul = ["000000", "FFFFFF", "FF0000", "00FF00", "0000FF", "FFFF00", "FF00FF", "00FFFF", "800000", "008000", "000080", "808000", "800080", "008080", "C0C0C0", "808080", "9999FF", "993366", "FFFFCC", "CCFFFF", "660066", "FF8080", "0066CC", "CCCCFF", "000080", "FF00FF", "FFFF00", "00FFFF", "800080", "800000", "008080", "0000FF", "00CCFF", "CCFFFF", "CCFFCC", "FFFF99", "99CCFF", "FF99CC", "CC99FF", "FFCC99", "3366FF", "33CCCC", "99CC00", "FFCC00", "FF9900", "FF6600", "666699", "969696", "003366", "339966", "003300", "333300", "993300", "993366", "333399", "333333"]
 
        function execom(fonct, argument1, argument2) {
            //alert(argument1);
            if (argument1 == "undefined") {
                argument1 = false;
            };
            if (argument2 == "undefined") {
                argument2 = Null;
            }
            document.execCommand(fonct, argument1, argument2);
        }
        function initbar(barreg) {
            var div = document.createElement("DIV");
            div.id = "editeur";
            div.contentEditable = true;
            document.body.appendChild(div);
            document.getElementById("fichier").style.height = "1px";
            var rub = document.getElementById("ruban");
            for (var i = 0; i < barreg.length; i++) {
                if (barreg[i].length / 2 == Math.round(barreg[i].length / 2)) {
                    var nombre = barreg[i].length;
                } else {
                    var nombre = barreg[i].length + 1;
                }
                //alert("barre"+ i +"---"+nombre);
                //ajout des div commandbar
                var div = document.createElement("DIV");
                div.className = "CMB";
                div.style.width = 30 * (nombre / 2) + "px";
                div.id = "barre" + i;
                rub.appendChild(div);
                for (var e = 0; e < barreg[i].length; e++) {
                    //alert(barreg[i][e]);
                    var divsub = document.createElement("DIV");
                    divsub.className = "Frad";
                    divsub.id = "frad" + barreg[i][e][2];
                    div.appendChild(divsub);
                    var bout = document.createElement("IMG");
                    bout.className = "rad";
                    //alert(barreg[i][e][5]);
                    bout.src = barreg[i][e][5];
                    bout.id = barreg[i][e][2];
                    bout.title = barreg[i][e][2];
                    divsub.appendChild(bout);
                    if (barreg[i][e][1] == "nouveaudoc") {
                        bout.addEventListener("click", function() {
                            editeur.innerHTML = "";
                        });
                    }
                    if (barreg[i][e][1] == "excecommand") {
                        bout.addEventListener("click", function() {
                            execom(this.id);
                        });
                    }
                    if (barreg[i][e][1] == "insertimg") {
                        bout.addEventListener("click", function() {
                            InsertImg();
                        });
                    }
 
                    //******************************************** creation de la liste de fontname
                    if (barreg[i][e][1] == "createlistfont") {
                        bout.addEventListener("click", function() {
                            document.getElementById("listfonts").style.visibility = "visible";
                        });
                        var fonts = ["Font Name", "Arial", "Aharoni", "Arial Black", "Arial Narrow", "Algerian", "Broadway", "Berlin Sans FB Demi", "Calibri", "Calligraph421 BT", "Castellar", "Comic Sans MS", "Copperplate Gothic Bold", "Courier", "Georgia", "Goudy Stout", "Harlow Solid Italic", "Helvetica", "Impact", "Informal Roman", "Lucida Calligraphy", "MS Sans Serif", "Milano LET", "Rockwell Extra Bold", "Script MT Bold", "Segoe Script", "Verdana", "Tahoma", "Trebuchet MS", "Victorian LET"];
                        var list = document.createElement("SELECT");
                        list.className = "selects";
                        list.size = 15;
                        list.id = "listfonts";
                        list.ZIndex = "200";
                        list.style.visibility = "hidden";
                        for (var a = 0; a < fonts.length; a++) {
                            var opt = document.createElement("OPTION");
                            opt.innerText = fonts[a];
                            opt.style.fontfamily = fonts[a];
                            list.appendChild(opt);
                        }
                        list.addEventListener("change", function() {
                            this.style.visibility = "hidden";
                            if (this.value != "Font Name") {
                                execom("fontname", false, this.value);
                                this.selectedIndex = "0";
                            }
                        });
                        divsub.appendChild(list);
                        list.addEventListener("mouseout", function() {
                            this.style.visibility = "hidden";
                        });
                    }
                    //******************************************fin de creation de la liste des fontnames                               
 
                    //******************************************** creation de la liste de fontsize
                    if (barreg[i][e][1] == "createlistefontsize") {
                        bout.addEventListener("click", function() {
                            document.getElementById("listsizes").style.visibility = "visible";
                        });
                        var sizze = ["taille Police", 1, 2, 3, 4, 5, 6, 7];
                        var listS = document.createElement("SELECT");
                        listS.className = "selects";
                        listS.size = 7;
                        listS.id = "listsizes";
                        listS.zIndex = "1";
                        listS.style.visibility = "hidden";
                        for (var s = 0; s < sizze.length; s++) {
                            var optS = document.createElement("OPTION");
                            optS.innerText = sizze[s];
                            optS.style.fontsize = sizze[s];
                            listS.appendChild(optS);
                        }
                        listS.addEventListener("change", function() {
                            this.style.visibility = "hidden";
                            if (this.value != "taille Police") {
                                execom("Fontsize", false, this.value);
                                this.selectedIndex = "0";
                            }
                        });
                        listS.addEventListener("mouseout", function() {
                            this.style.visibility = "hidden";
                        });
                        divsub.appendChild(listS);
                    }
                    //******************************************fin de creation de la liste des fontsize                              
 
                    //******************************************** creation de la liste de BALISE h
                    if (barreg[i][e][1] == "createlisttitre") {
                        bout.addEventListener("click", function() {
                            document.getElementById("listH").style.visibility = "visible";
                        });
                        var hs = ["normal", "<h1>", "<h2>", "<h3>", "<h4>", "<h5>", "<h6>"];
                        var listH = document.createElement("SELECT");
                        listH.className = "selects";
                        listH.size = 7;
                        listH.id = "listH";
                        listH.zIndex = "100";
                        listH.style.visibility = "hidden";
                        for (var s = 0; s < hs.length; s++) {
                            var opth = document.createElement("OPTION");
                            opth.innerText = hs[s];
                            opth.style.fontsize = "20px";
                            listH.appendChild(opth);
                        }
                        listH.addEventListener("change", function() {
                            this.style.visibility = "hidden";
                            execom("formatBlock", false, this.value);
                        });
 
                        /// if(hs[s] !="Suprimer la balise H")
                        listH.addEventListener("mouseout", function() {
                            this.style.visibility = "hidden";
                        });
                        divsub.appendChild(listH);
                    }
                    //******************************************fin de creation de la liste de BALISE H                           
 
                    //******************************************** APEL LA palette couleur pour le FORECOLOR
                    if (barreg[i][e][1] == "createpalettecolor") {
                        bout.addEventListener("click", function() {
                            modepal = "forecolor";
                            StoreSelection();
                            document.getElementById("editeur").contentEditable = false;
                            document.getElementById("palette").style.visibility = "visible";
                            document.getElementById("ruban").focus();
                        });
                    } //fin du if
                    //*****************************************fin dapel de la palette couleur 
 
                    //******************************************** apel de la palette couleur pour le BACKCOLOR
                    if (barreg[i][e][1] == "createpaletteback") {
                        bout.addEventListener("click", function() {
                            modepal = "backcolor";
                            document.getElementById("palette").style.visibility = "visible";
                        });
                    } //fin du if
                    //*****************************************fin d'APEL de la palette couleur pour  backcolor
 
                    //******************************************** apel  de la palette couleur pour le shadowcolortext
                    if (barreg[i][e][1] == "shadowcolor") {
                        bout.addEventListener("click", function() {
                            modepal = "shadowcolor";
                            document.getElementById("palette").style.visibility = "visible";
                            document.getElementById('palette').focus();
                        });
                    } //fin du if 
                    //*****************************************fin d'apel de la palette couleur shadowcolor
 
                    //******************************************** creation du menu div
                    if (barreg[i][e][1] == "insertdiv") {
                        bout.addEventListener("click", function() {
                            document.getElementById("menudiv").style.visibility = "visible";
                        });
                        var pal = document.createElement("DIV");
                        pal.className = "palettecouleur";
                        pal.id = "menudiv";
                        pal.style.height = "250px";
                        pal.style.width = "400px";
                        pal.style.visibility = "hidden";
                        var b = document.createElement("Button");
                        b.id = "ferme";
                        b.className = "btclose";
                        b.innerText = "X";
                        b.addEventListener("click", function() {
                            this.parentElement.style.visibility = "hidden";
                        });
                        pal.appendChild(b);
                        var bt = document.createElement("BUTTON");
                        bt.innerText = "Ajouer un div";
                        bt.style.width = "100%";
                        bt.style.height = "35px";
                        bt.className = "rad";
                        bt.addEventListener("click", function() {
                            this.parentElement.style.visibility = "hidden";
                            insertdiv();
                        });
                        pal.appendChild(bt);
                        var sel = document.createElement("SELECT");
                        sel.className = "selects";
                        sel.iD = "bordsize";
                        sel.addEventListener("change", function() {
                            this.parentElement.style.visibility = "hidden";
                            borduresize(this);
                        });
                        var opth = document.createElement("OPTION");
                        opth.innerText = "grosseur du trait";
                        //opth.selected="selected";
                        opth.id = "dep";
                        opth.style.fontsize = "20px";
                        sel.style.width = "98%";
                        sel.appendChild(opth);
                        for (var c = 1; c < 30; c++) {
                            var opth = document.createElement("OPTION");
                            opth.innerText = c;
                            opth.style.fontsize = "15px";
                            sel.appendChild(opth);
                        }
                        pal.appendChild(sel);
                        var bt = document.createElement("BUTTON");
                        bt.innerText = "coins arrondis";
                        bt.style.width = "100%";
                        bt.style.height = "35px";
                        bt.className = "rad";
                        bt.addEventListener("click", function() {
                            alert(document.activeElement.tagName);
                            this.parentElement.style.visibility = "hidden";
                        });
                        pal.appendChild(bt);
                        divsub.appendChild(pal);
                    }
                    //*****************************************fin de  creation du menu div
 
                    //******************************************** creation du menu dossier
                    if (barreg[i][e][1] == "menudossier") {
                        bout.addEventListener("click", function() {
                            document.getElementById("menudossier").style.visibility = "visible";
                        });
                        var pal = document.createElement("DIV");
                        pal.className = "palettecouleur";
                        pal.id = "menudossier";
                        pal.style.height = "250px";
                        pal.style.width = "400px";
                        pal.style.visibility = "hidden";
                        var b = document.createElement("Button");
                        b.id = "ferme";
                        b.className = "btclose";
                        b.innerText = "X";
                        b.addEventListener("click", function() {
                            this.parentElement.style.visibility = "hidden";
                        });
                        pal.appendChild(b);
                        var b = document.createElement("Button");
                        b.id = "enregistrer";
                        b.className = "rad";
                        b.innerText = "Enregistrer";
                        b.style.position = "absolute"
                        b.style.top = "30px";
                        b.style.left = "20px";
                        b.style.height = "30px";
                        b.style.width = "150px";
                        b.addEventListener("click", saveas, false);
                        pal.appendChild(b);
                        var b = document.createElement("Button");
                        b.id = "ouvrir";
                        b.className = "rad";
                        b.innerText = "ouvrir un fichier";
                        b.style.position = "absolute"
                        b.style.top = "70px";
                        b.style.left = "20px";
                        b.style.height = "30px";
                        b.style.width = "150px";
                        pal.appendChild(b);
                        //bout.addEventListener("click", choix_dossier,false);}
                        divsub.appendChild(pal);
                    }
                    //*************************************FIN DE CREATION DU MENU DOSSIER
                } // fin du for e
            } //fin du for i 
            /////////////////////////////////////////////////////////////////         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";
                    document.getElementById("editeur").contentEditable = true;
                    ShowStoredSelections();
                    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);
                    }
                    ClearStoredSelections();
                });
                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 
        } //end function
        function inOUT(event) {
            //alert("coucou");
            //alert(document.getElementFromPoint(event.clientX,event.clientY).className);
        }
 
        //********************************
    </script>
</head>
<body>
    <input id="fichier" type="file" />
    <div id="ruban"></div>
    <!-div id="editeur" contenteditable=true-!>
    <p>&nbsp;</p>
 
    </div>
    <script>
        var barre1 = [bold, italic, underline, strike, Fontsize, font, formatBlock, justufyleft, justifycenter, Justifyright, indent, oudent, insertunorderedlist, insertorderedlist];
        var barre2 = [color, backcolor, textshadowcolor, RemoveFormat];
        var barre3 = [insertimg, ajoutdiv, inserttable, link, unlink];
        var barre4 = [newdoc, dossier];
        var barreg = [barre1, barre2, barre3, barre4];
        initbar(barreg);
    </script>
    <input type="color" value="#fad345" name="textcolor">
</body>
</html>

**Beginner.** · 16/02/2017, 17h24

Ok je vais regarder...

Entre temps j'avais fait un test en ajoutant ce qui manquait et je n'ai pas eu le soucis qu'on voit dans ton image animée...

Et je ne comprends pas le rectangle qu'on voit c'est quoi ? Est-ce l'éditeur ? Comment se fait-il que tu puisses le déplacer ? Si ce n'est pas toi qui as ajouté cette fonction et donc que celle-ci est due au mode édition alors c'est que tu n'as pas retiré temporairement ce mode comme l'a suggéré Watilin...

Peux-tu faire le test sans le mode édition ?

**patricktoulon** · 16/02/2017, 17h41

re
oui le rectangle que je bouge c'est un div enfant du "<div id="editeur" contenteditable=true></div>

cet enfant hérite de l'éditable c'est tout c'est pour ca que je peut le déplacer tout balise dans un éditable peut être déplacé(div ,image,bouton,et....)

et toute les balise de type layer ont cette bordure quant on double-clique dessus

click=sélection (les 6 petit carrés et bordures fine)
double-clique=mode Edition( lers 6 petits carrés et bordures en slash)

ca se fait tout seul du moins avec les librairies IE(ie,hta,activX)

maintenant le drag dynamique est fait par les fonction dragstart de l'élément et(mousewhere,dragonmouseup)du document

dans le codé en entier j'enlève le mode éditable et le remet ensuite déjà

l

**Watilin** · 16/02/2017, 17h56

Envoyé par patricktoulon

je l'ai donc épuré et mis un coup de beautyfier indenter

Beginner., tu n’as pas toutes les données du problème. En fait, Patrick bosse sur une application HTA embarquée dans Microsoft Excel. On est donc sous le moteur de rendu d’Internet Explorer, mais sans savoir précisément quelle version. De ce fait on peut utiliser les fonctionnalités spécifiques à Microsoft, dont un mode édition plus évolué que sous les autres navigateurs, car ces derniers en ont, en quelques sortes, abandonné le support.

Ce même environnement fait qu’il se passe parfois des choses difficiles à comprendre, notamment un label qui n’apparait pas quand l’input correspondant n’est pas inséré au bon moment…

Patrick, si la bordure reste même en désactivant le mode édition, je pense qu’il faut tenter de « blurer » l’élément actif, autrement dit lui enlever le focus. Soit c’est possible en appelant simplement sa méthode blur (mais je ne sais pas si tous les éléments en ont une), soit tu essayes de donner le focus à autre chose. Dans tous les cas, garde en mémoire quel était l’élément focusé pour pouvoir lui rendre le focus par la suite.

**Beginner.** · 16/02/2017, 18h11

Envoyé par Watilin

Beginner., tu n’as pas toutes les données du problème.

Ah ok merci donc difficile pour moi de tester...

Envoyé par patricktoulon

re
oui le rectangle que je bouge c'est un div enfant du "<div id="editeur" contenteditable=true></div>

cet enfant hérite de l'éditable c'est tout c'est pour ca que je peut le déplacer tout balise dans un éditable peut être déplacé(div ,image,bouton,et....)

et toute les balise de type layer ont cette bordure quant on double-clique dessus

click=sélection (les 6 petit carrés et bordures fine)
double-clique=mode Edition( lers 6 petits carrés et bordures en slash)

ca se fait tout seul du moins avec les librairies IE(ie,hta,activX)

maintenant le drag dynamique est fait par les fonction dragstart de l'élément et(mousewhere,dragonmouseup)du document

dans le codé en entier j'enlève le mode éditable et le remet ensuite déjà

l

Oui c'est ce que j'avais plus ou moins compris mais justement si tous ces effets (déplacement, bordure, les petits carrés...) sont dus au mode édition alors ils devraient disparaitre quand on quitte ce mode, non ? Et donc on ne devrait plus avoir ce qu'on voit dans l'image animée...

Ou quelque chose m'échappe ?

**patricktoulon** · 16/02/2017, 22h09

re
@Watilin
je te cite

Beginner., tu n’as pas toutes les données du problème. En fait, Patrick bosse sur une application HTA embarquée dans Microsoft Excel. On est donc sous le moteur de rendu d’Internet Explorer, mais sans savoir précisément quelle version. De ce fait on peut utiliser les

c'est pas tout a fait ca

je n'utilise pas HTA dans exel

dans excel dans les controls activX nous avons a dispos le Webbrowser qui peut afficher un document html ,un pdf ,une image gif animée

bien sur quand c'est un document de type html on peut le manipuler dom1 dom2 mais pas tout!!!! car il n'utilise pas directement la la librairie de IE mais Microsoft HTML Object Library c'est une copie de cette dll en fait mais qui date de office 2003 et qui n'a pas évolué ou très peu

on peut bien sur améliorer vers le dom2 et css2/3 en jouant avec les balises meta u-XuA compatible vers IE edge

avec le hta (application html) on peut aller un peu plus loin vers IE11 bien sur avec balise meta de compatibilité vers IE edge
parce que lui a l'inverse du activX de excel il utilise bien les librairie de IE installe

par contre quand on use de la compatibilité on perd certaine fonction de l'application elle même

tel que la gestion de caption ID d'instance etc.....

dans HTA selon le mode compatibilité addeventlistener ne marchera pas il faudra utiliser attachevent ainsi que la gestion event.target ou la plus ancienne event.srcElement

perso je l'utilise en compatibilité maximum "IE edge" tant pis pour la gestion

mais il faut savoir que depuis que vous avez commencer a m'aider je code pour IE11 on va rester comme ca je me débrouillerais pour les compatibilité activX et hta après
merci pour l'aide que vous m' apportez

pour le blur je sais pas
en tout cas dans la version complète que j'ai donné au moment ou je clique sur le bouton pour faire apparaitre la palette couleur l'éditeur n'est plus content éditable et la sélection est mémorisé et désélectionnée et je fait un rubant.focus() ( le ruban c'est le div contenant tout les boutons et visiblement la on a aussi un comportement étrange

normalement si je donne le focus a un élément l'autre le perd non? et bien c'est pas le cas

par contre si je le fait a la main c'est bon

Petit souci avec le coté visuel

JavaScript

Discussions similaires

Partager

Partager