onClick et execCommand incompatibles sous Internet Explorer

Bonjour,

Je travaille sur un editeur Javascript depuis quelques temps et je me casse les dents pour le rendre compatible avec Internet Explorer.

En effet, j'ai programmé une fonction qui utilise la fonction execCommand sur un iframe et lorsque je l'appelle avec un onclick sur une liste (<li onclick="mafonction();"></li>) sous Mozilla -> sa fonctionne mais sous Internet Explorer -> sa ne fonctionne pas.

J'ai essayé de remplacer le onclick par onmouseover et la sa fonctionne pour les deux navigateurs ! Mais moi, ce que je veut, c'est que la fonction soit exécutée lorsque l'on clique.
Sinon, j'ai essayé de remplacer dans le onclick ma fonction par l'appel d'une fenetre alert, et sa fonctionne ! lol

J'en déduit donc : que "execCommand" n'est pas compatible avec "onClick" sous Internet Explorer (j'ai testé que sur la version 7 !). Et j'en appel à une solution !

Merci.

Bonjour,

>>j'en déduit donc : que "execCommand" n'est pas compatible avec "onClick" sous Internet
>> Explorer (j'ai testé que sur la version 7 !). Et j'en appel à une solution !

très très mauvaise déduction !
( les bugs n'existent pas.... sur aucun navigateur ! )
si ça ne fonctionne pas, c'est que celui qui code fait une erreur... toujours !!!!

    exemple qui fonctionne avec ie,ff, opera, safari.....

---

                Cordialement            Bul         [mon Site]     [M'écrire]

réponse au "message privé" :

pourquoi voudrais-tu être aidé  en privé ?
le forum est là pour ça :
plus d'intervenants, plus de compétences,
plus de chances de réponses correctes...

je n'utilise pas msn, je pense que je
n'utiliserai jamais, on peut me joindre
facilement [ voir ma signature ]
mais le forum, c'est le mieux !

@+

---

                Cordialement            Bul         [mon Site]     [M'écrire]

Salut,

lol, que dire de plus, a part bultez++ !!!

a++

Si la réponse vous convient, pensez : Réponse acceptée !

Re bonjour,

Bon voici le code !

Code javascript du fichier EditeurCod.js :
// JavaScript Document

/* insertAdjacentHTML() - Thor Larholm *************************************
* insertAdjacent%() est une méthode supportée par seulement IE.
***************************************************************************/
if(typeof HTMLElement!="undefined"
&& !HTMLElement.prototype.insertAdjacentElement){
    HTMLElement.prototype.insertAdjacentElement = function(where,parsedNode){
        switch(where){
        case 'beforeBegin':
            this.parentNode.insertBefore(parsedNode,this)
            break;
        case 'afterBegin':
            this.insertBefore(parsedNode,this.firstChild);
            break;
        case 'beforeEnd':
            this.appendChild(parsedNode);
            break;
        case 'afterEnd':
            if(this.nextSibling)this.parentNode.insertBefore(parsedNode,this.nextSibling);
            else this.parentNode.appendChild(parsedNode);
            break;
        }
    }
}
/*******************************************************************************
* EditeurCod
*******************************************************************************/
EditeurCod = function(args){
    // Appel méthode : initiatilisation.
    this.iniT(args.id, args.dimX || '600px', args.dimY || '400px', args.police || 0, args.taillePol || 0);
}
// Méthode : initialisation.
EditeurCod.prototype.iniT = function(id,dimX,dimY,police,taillePol){
    // Variables.
    this.id = id;
    this.dimX = dimX;
    this.dimY = dimY;
    this.champ = document.getElementById(this.id);
    this.contenu = this.champ.value;
    this.prop = 0;
    this.policeSel = 0;
    this.taillePolSel = 0;
    this.navig = navigator.appName;
    // Fonctions (TAB).
    foncTab = new Array();
    // ID - Propriété - Titre.
    foncTab['police'] = ['fontname','Police du texte',1]; // Police.
    foncTab['taillePol'] = ['fontsize','Taille du texte',1]; // Taille police.
    this.foncTab = foncTab;
    // Polices (TAB).
    var polTab = ['Arial','Calibri','Courier New','Georgia','Sans Serif','Tahoma','Times New Roman','Trebuchet MS','Verdana'];
    this.polTab = polTab;
    // Barres (TAB).
    barTab = new Array();
    barTab[0] = ['police','taillePol'];

    var policeSel ='<div><ul>';
    for(var i=0;i < this.polTab.length;i++){
        policeSel +='<li onclick="'+this.id+'.selSel(\''+this.polTab[i]+'\');" style="font-family:'+this.polTab[i]+';">'+this.polTab[i]+'</li>';
    }
    policeSel +='</ul></div>';
    this.police = policeSel;

    var taillePolSel ='<div><ul>';
    for(var i=1;i < 8;i++){
        taillePolSel +='<li onclick="'+this.id+'.selSel('+i+');" style="font-size:'+(i*3+3)+'pt;">Taille '+i+'</li>';
    }
    taillePolSel +='</ul></div>';
    this.taillePol = taillePolSel;

    /* Editeur ****************************************************************/
    var bar ='<div>';
    for(var i = 0;i < barTab.length;i++){
        if(i == 1 || i == 4)bar +='<br/>';
        bar +='<div class="bar">';
        for(var i2 = 0;i2 < barTab[i].length;i2++){
            var valeur = barTab[i][i2];
            if(valeur =='police' || valeur =='taillePol')bar +='<div id="ECF'+valeur+'" class="sel"></div><div id="ECV'+valeur+'">'+foncTab[valeur][1]+'</div><a id="ECB'+valeur+'" href="javascript:'+this.id+'.selOuv(\''+valeur+'\');"><img src="images/sel.gif" alt="'+foncTab[valeur][1]+'"/></a>';
            else bar +='<a id="ECB'+valeur+'" href="javascript:'+this.id+'.commanD(\''+foncTab[valeur][0]+'\',\''+valeur+'\');" title="'+foncTab[valeur][1]+'"><img src="images/'+valeur+'.gif" alt="'+foncTab[valeur][1]+'"/></a>';
        }
        bar +='</div>';
    }
    var iFrame ='<h6>EditeurCod</h6><br/><iframe id="ECF'+this.id+'" frameborder="0"></iframe></div>';
    var editeur ='<div class="EditeurCod">'+ bar + iFrame +'</div>';
    this.champ.style.display ='none';
    this.champ.insertAdjacentHTML('afterEnd',editeur);
    /**************************************************************************/

    /* iFrame *****************************************************************/
    this.iFrame = document.getElementById('ECF'+this.id);
    this.iFrameCont = this.iFrame.contentWindow.document;
    this.iFrame.style.width = this.dimX;
    this.iFrame.style.height = this.dimY;
    this.iFrameCont.open();
    this.iFrameCont.write(this.contenu);
    this.iFrameCont.close();
    this.iFrameCont.designMode ='on';
    /**************************************************************************/
}
// Méthode : commande.
EditeurCod.prototype.commanD = function(cmd,val){
    if(cmd =='hilitecolor' && this.navig =='Microsoft Internet Explorer')cmd ='backcolor';
    this.iFrame.contentWindow.focus();
    this.iFrameCont.execCommand(cmd,false,val);
}
// Méthode : fermer.
EditeurCod.prototype.ferM = function(){
    if(this.prop != 0){
        if(this.prop =='textCouleur' || this.prop =='textFond')var val ='Couleur';
        else var val = this.prop;
        document.getElementById('ECF'+val).style.display ='none';
        if(this.prop !='textCouleur' && this.prop !='textFond')document.getElementById('ECF'+val).innerHTML ='';
        this.prop = 0;
    }
}
// Méthode : selection ouverture.
// OK.
EditeurCod.prototype.selOuv = function(val){
    if(this.prop == val){
        this.ferM();
    }else{
        this.ferM();
        document.getElementById('ECF'+val).innerHTML = this[val];
        document.getElementById('ECF'+val).style.display ='block';
        this.prop = val;
    }
}
// Méthode : selection.
// OK.
EditeurCod.prototype.selSel = function(val){
    document.getElementById('ECV'+this.prop).innerHTML = val;
    this.commanD(this.foncTab[this.prop][0],val);
    this.ferM();
}

Code du fichier test.html :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <title></title>
<script language="JavaScript" type="text/javascript" src="EditeurCod.js"></script>
<style>
div.EditeurCod{
    font-family:Verdana; font-size:11pt;
    position:relative;
    padding:5px;
    border:dashed 1px #d9d9d9;
}
div.EditeurCod img{
    border:0px;
}
div.EditeurCod div.fen h1, h2, form, fieldset, input{
    margin:0px;
    padding:0px;
}
div.EditeurCod br{
    clear:both;
}
div.EditeurCod h6{
    float:left;
    margin:0px;
    padding:0px;
    font-family:Verdana; font-size:small; font-weight:bold; color:#808080;
}
div.EditeurCod div.bar{
    float:left;
    height:26px; width:auto;
    padding:3px 5px 0px 5px;
    !padding-bottom:4px;
    margin:0px 1px 1px 0px;
    background-color:#f2f2f0;
    border:solid 1px #e5e5e5;
}
div.EditeurCod div.bar div#ECVpolice, div.EditeurCod div.bar div#ECVtaillePol{
    float:left;
    margin-right:-1px;
    width:150px;
    height:18px;
    !height:22px;
    padding:0px 2px 2px 2px;
    border:solid 1px #d9d9d9;
    overflow:hidden;
}
div.EditeurCod a{
    display:block; float:left;
    border:solid 1px #d9d9d9;
    margin-right:1px;
    font-family:Verdana; color:#000; text-decoration:none;
}
div.EditeurCod a:hover{
    border-color:#ffd400;
}
div.EditeurCod a.noimg{
    padding:1px 2px 1px 2px;
}
div.EditeurCod iframe{
    clear:both;
    border:solid 1px #d9d9d7;
    font-family:Verdana; color:#000;
}

div.EditeurCod div.sel{
    float:left;
    display:none;
    position:relative;
}
div.EditeurCod div.sel div{
    position:absolute !important;
    top:23px;
    !top:6px;
    !left:-2px;
    width:170px;
    height:230px;
    overflow:auto;
    padding:5px;
    border:solid 1px #CCC;
    background-color:#FFF;
}
div.EditeurCod div.sel ul{
    margin:0px;
    padding:0px;
    list-style-type:none;
}
div.EditeurCod div.sel ul li{
    padding:2px 5px 2px 5px;
    margin-bottom:-1px;
    border-bottom:dashed 1px #CCC;
}
div.EditeurCod div.sel ul li:hover{
    color:#FFF;
    background-color:#ffbf00;
    border:solid 1px #f2b600;
}
</style>
  </head>

<body>
<textarea name="texti" id="texti">test</textarea>
<script>
var texti = new EditeurCod({id:'texti', dimX:'800px', dimY:'400px', police:'Calibri', taillePol:'3'});
</script>

</body>

</html>

Voila. Donc, lorsque le script est exécuté sous Internet Explorer, il y a le fameux bug dont je parlais. Il est vrai que cela ne vient pas de IE mais d'où vien-il ?

Pour voir le bug, tapez du texte dans l'iframe. Sélectionnez le texte tapé puis cliquez sur un des selects et enfin selectionnez une valeur. Vous allez voir que le execCommand n'a pas été appliqué sur votre sélection et que le curseur s'est replacé au début ! De même, si votre curseur est positionné à la fin et que vous n'avez pas fait de sélection.

Donc, si quelqu'un sait d'où cela vient, ce serait super !

Merci.

comme d'habitude....
dans un 1er temps, refus de montrer son code... on se demande pourquoi....
et dans un 2ème temps : tiens... v'la tout ! et démerde !

1° tu aurais pu faire l'affort de faire l'extrait nécessaire
    et de le poster ici ( M'écrire est inutile ! c'est mieux
    dans ce forum, ça sert à d'autres , et les autres intervenants
    peuvent aussi aider bien plus qu'efficacement !)

2° tu n'as probablement pas fait l'effort non plus d'aller
    voir le lien que je te donnais....
    tu y aurais vu :

    switch (navigator.appName)   
    {    //         ===============================
        case     "Microsoft Internet Explorer":
        //         ===============================
            Fen=window.frames['Saisie'];
            Champ=Fen.document;
            document.getElementById('SiIe').style.display="inline";
            break;
        //               =========
        default:    //     sinon
        //               =========
            Champ=document.getElementById('Saisie').contentDocument;
            Fen=document.getElementById('Saisie').contentWindow;
            break;   
    }
   
    et que l'execCommand est fait sur Cahmp !

    Champ.execCommand("ordre"... )

---

                Cordialement            Bul         [mon Site]     [M'écrire]

LOL !

Salut,

1° -> il s'agit bien d'un extrait ! lol
2° -> Si si, j'y suis allé, mais quand j'ai vu que j'avais déjà ton script en Local, j'ai pas pensé a regarder le code.

Bref : concernant ton code, j'essaye ce soir et je te dit car la je doit repartir.

Merci.

je ne sais pas ce que c'est "un extrait lol" ??? ça veut dire quoi ?
    un "extrait du code" je comprend, tu veux sûrement dire
        "un extrait où je ne me suis pas emmerdé, où j'ai tout mis" ?  

tout ce que je vois par exemple
        c'est combien (?) de lignes css totalement inutiles pour le problème ?
        c'est un .js qu'il faut qu'on intégre (!!!) , avec des fonctions
          qui n'ont rien à voir avec le souci,
        ...
>> j'ai pas pensé a regarder le code.
    ah ben ! je t'ai pourtant dis qu'il fonctionnait !
    et tu ne penses pas à regarder ????   c'est se moquer du monde.

---

                Cordialement            Bul         [mon Site]     [M'écrire]

Salut,

Tu est borné ? lol -> Je viens même de me rendre compte que j'avais tellement coupé qu'il manquait une fonction pour que le script fonctionne !

Pour le CSS, l'idée est de pouvoir essayer à l'aise ! Car sans le CSS, sa aurait été le fouillis sur la page et là j'aurais eu comme réflexion -> « tu n'aurais pas pu rendre sa plus présentable ? »

De plus, sa prend pas plus de temps de sélectionner le CSS avec le reste du code HTML.

Concernant ton script : je pensais que tu voulais que je le télécharge et que je me casse !

Vraiment, sur ce coups la, je trouve la critique facile. Mais bon, laissons de coté ce que je pense.

J'ai adapté ton code, et je suis arrivé à une situation que j'ai déjà rencontrée ! Sous Internet Explorer, la frame n'est plus éditable et n'est plus manipulable. Alors que lorsque je remets mon « getElementById » sa marche. Encore une chose d'ambigu que je n'arrive pas à comprendre.

V'la tout ! Le code présenté ci dessous à été modifié en fonction de l'aide apporté. J'ai de plus rajouté un bout de code important. (En ROUGE !)

 // JavaScript Document

/* insertAdjacentHTML() - Thor Larholm *************************************
* insertAdjacent%() est une méthode supportée par seulement IE.
***************************************************************************/
if(typeof HTMLElement!="undefined"
&& !HTMLElement.prototype.insertAdjacentElement){
    HTMLElement.prototype.insertAdjacentElement = function(where,parsedNode){
        switch(where){
        case 'beforeBegin':
            this.parentNode.insertBefore(parsedNode,this)
            break;
        case 'afterBegin':
            this.insertBefore(parsedNode,this.firstChild);
            break;
        case 'beforeEnd':
            this.appendChild(parsedNode);
            break;
        case 'afterEnd':
            if(this.nextSibling)this.parentNode.insertBefore(parsedNode,this.nextSibling);
            else this.parentNode.appendChild(parsedNode);
            break;
        }
    }
    HTMLElement.prototype.insertAdjacentHTML = function(where,htmlStr){
        var r = this.ownerDocument.createRange();
        r.setStartBefore(this);
        var parsedHTML = r.createContextualFragment(htmlStr);
        this.insertAdjacentElement(where,parsedHTML)
    }
    HTMLElement.prototype.insertAdjacentText = function(where,txtStr){
        var parsedText = document.createTextNode(txtStr)
        this.insertAdjacentElement(where,parsedText)
    }
}
/*******************************************************************************
* EditeurCod
*******************************************************************************/
EditeurCod = function(args){
    // Appel méthode : initiatilisation.
    this.iniT(args.id, args.dimX || '600px', args.dimY || '400px', args.police || 0, args.taillePol || 0);
}
// Méthode : initialisation.
EditeurCod.prototype.iniT = function(id,dimX,dimY,police,taillePol){
    // Variables.
    this.id = id;
    this.dimX = dimX;
    this.dimY = dimY;
    this.champ = document.getElementById(this.id);
    this.contenu = this.champ.value;
    this.prop = 0;
    this.policeSel = 0;
    this.taillePolSel = 0;
    this.navig = navigator.appName;
    // Fonctions (TAB).
    foncTab = new Array();
    // ID - Propriété - Titre.
    foncTab['police'] = ['fontname','Police du texte',1]; // Police.
    foncTab['taillePol'] = ['fontsize','Taille du texte',1]; // Taille police.
    this.foncTab = foncTab;
    // Polices (TAB).
    var polTab = ['Arial','Calibri','Courier New','Georgia','Sans Serif','Tahoma','Times New Roman','Trebuchet MS','Verdana'];
    this.polTab = polTab;
    // Barres (TAB).
    barTab = new Array();
    barTab[0] = ['police','taillePol'];

    var policeSel ='<div><ul>';
    for(var i=0;i < this.polTab.length;i++){
        policeSel +='<li onclick="'+this.id+'.selSel(\''+this.polTab[i]+'\');" style="font-family:'+this.polTab[i]+';">'+this.polTab[i]+'</li>';
    }
    policeSel +='</ul></div>';
    this.police = policeSel;

    var taillePolSel ='<div><ul>';
    for(var i=1;i < 8;i++){
        taillePolSel +='<li onclick="'+this.id+'.selSel('+i+');" style="font-size:'+(i*3+3)+'pt;">Taille '+i+'</li>';
    }
    taillePolSel +='</ul></div>';
    this.taillePol = taillePolSel;

    /* Editeur ****************************************************************/
    var bar ='<div>';
    for(var i = 0;i < barTab.length;i++){
        if(i == 1 || i == 4)bar +='<br/>';
        bar +='<div class="bar">';
        for(var i2 = 0;i2 < barTab[i].length;i2++){
            var valeur = barTab[i][i2];
            if(valeur =='police' || valeur =='taillePol')bar +='<div id="ECF'+valeur+'" class="sel"></div><div id="ECV'+valeur+'">'+foncTab[valeur][1]+'</div><a id="ECB'+valeur+'" href="javascript:'+this.id+'.selOuv(\''+valeur+'\');"><img src="images/sel.gif" alt="'+foncTab[valeur][1]+'"/></a>';
            else bar +='<a id="ECB'+valeur+'" href="javascript:'+this.id+'.commanD(\''+foncTab[valeur][0]+'\',\''+valeur+'\');" title="'+foncTab[valeur][1]+'"><img src="images/'+valeur+'.gif" alt="'+foncTab[valeur][1]+'"/></a>';
        }
        bar +='</div>';
    }
    var iFrame ='<h6>EditeurCod</h6><br/><iframe name="ECF'+this.id+'" id="ECF'+this.id+'" frameborder="0"></iframe></div>';
    var editeur ='<div class="EditeurCod">'+ bar + iFrame +'</div>';
    this.champ.style.display ='none';
    this.champ.insertAdjacentHTML('afterEnd',editeur);
    /**************************************************************************/

    /* iFrame *****************************************************************/
    if(this.navig =='Microsoft Internet Explorer'){
        this.iFrame = window.frames['ECF'+this.id];
        this.iFrameCont = this.iFrame.document;
    }else{
        this.iFrame = document.getElementById('ECF'+this.id);
        this.iFrameCont = this.iFrame.contentDocument;
    }
    /*this.iFrame = document.getElementById('ECF'+this.id);
    this.iFrameCont = this.iFrame.contentWindow.document;*/
    this.iFrame.style.width = this.dimX;
    this.iFrame.style.height = this.dimY;
    this.iFrameCont.open();
    this.iFrameCont.write(this.contenu);
    this.iFrameCont.close();
    this.iFrameCont.designMode ='on';
    /**************************************************************************/
}
// Méthode : commande.
EditeurCod.prototype.commanD = function(cmd,val){
    if(cmd =='hilitecolor' && this.navig =='Microsoft Internet Explorer')cmd ='backcolor';
    this.iFrame.contentWindow.focus();
    this.iFrameCont.execCommand(cmd,false,val);
}
// Méthode : fermer.
EditeurCod.prototype.ferM = function(){
    if(this.prop != 0){
        if(this.prop =='textCouleur' || this.prop =='textFond')var val ='Couleur';
        else var val = this.prop;
        document.getElementById('ECF'+val).style.display ='none';
        if(this.prop !='textCouleur' && this.prop !='textFond')document.getElementById('ECF'+val).innerHTML ='';
        this.prop = 0;
    }
}
// Méthode : selection ouverture.
// OK.
EditeurCod.prototype.selOuv = function(val){
    if(this.prop == val){
        this.ferM();
    }else{
        this.ferM();
        document.getElementById('ECF'+val).innerHTML = this[val];
        document.getElementById('ECF'+val).style.display ='block';
        this.prop = val;
    }
}
// Méthode : selection.
// OK.
EditeurCod.prototype.selSel = function(val){
    document.getElementById('ECV'+this.prop).innerHTML = val;
    this.commanD(this.foncTab[this.prop][0],val);
    this.ferM();
}

Au revoir.

>> Tu est borné ?
    pardon ?

---

                Cordialement            Bul         [mon Site]     [M'écrire]