JavaScript IE Issue

Question

Ceci est un code pour un éditeur de texte WYSIWYG sur lequel je travaille. Je travaille sur le HTML à BBCODE et vice versa partie maintenant. Cela fonctionne très bien dans Fire Fox mais pas dans Internet Explorer. Pensées?

function textstyle(a) { 
    document.getElementById(a).style.visibility = 'visible'; 
    document.getElementById('editor').contentWindow.focus(); 
} 

function option(a,b) { 
    document.getElementById('editor').contentWindow.document.execCommand(a, false, b); 
    document.getElementById('editor').contentWindow.focus(); 
} 

function button(a) { 
    document.getElementById('editor').contentWindow.document.execCommand(a, false, null); 
    document.getElementById('editor').contentWindow.focus(); 
} 

var colorSelection; 

function selectColor(selection) { 
    colorSelection = selection; 
    document.getElementById('colorSelector').style.left = 0 + document.getElementById(selection).offsetLeft + "px"; 
    document.getElementById('colorSelector').style.top = 0 + document.getElementById(selection).offsetTop + document.getElementById(selection).offsetHeight + "px"; 
    document.getElementById('colorSelector').style.visibility = 'visible'; 
    return; 
} 

function changeColor(colorCode) { 
    document.getElementById('editor').contentWindow.document.execCommand(colorSelection, false, colorCode); 
    document.getElementById('colorSelector').style.visibility = 'hidden'; 
    document.getElementById('editor').contentWindow.focus(); 
    return; 
} 

function dismissmenu() 
{ 
    document.getElementById("colorSelector").style.visibility = 'hidden'; 
    document.getElementById("fontlist").style.visibility = 'hidden'; 
    document.getElementById("formatlist").style.visibility = 'hidden'; 
    document.getElementById("sizelist").style.visibility = 'hidden'; 
} 

function Start() { 
    document.getElementById('editor').contentWindow.document.designMode = "on"; 
    document.getElementById('editor').contentWindow.document.execCommand("styleWithCSS", false, "false"); 

    try { 
     document.getElementById('editor').contentWindow.document.execCommand("undo", false, null); 
     editormode = "true"; 
    } catch (e) { 
     editormode = "false"; 
    } 

    if (document.addEventListener) { 
     document.addEventListener("mouseup", dismissmenu, true); 
     document.getElementById("editor").contentWindow.document.addEventListener("mouseup", dismissmenu, true); 
     document.addEventListener("keypress", dismissmenu, true); 
     document.getElementById("editor").contentWindow.document.addEventListener("keypress", dismissmenu, true); 
    } else if (document.attachEvent) { 
     document.attachEvent("mouseup", dismissmenu, true); 
     document.getElementById("editor").contentWindow.document.attachEvent("mouseup", dismissmenu, true); 
     document.attachEvent("keypress", dismissmenu, true); 
     document.getElementById("editor").contentWindow.document.attachEvent("keypress", dismissmenu, true); 
    } 
} 

function switchEditorMode() { 
    if (editormode == "true") { 

     var replaceTagsByMode = function(html, editormode) { 
      var tags = {}; 
      for (var i=0, a=['b', 'i', 'u', 'strike', 'sub', 'sup']; i<a.length; i++) { 
       tags[['<', a[i], '>'].join('')] = ['[', a[i], ']'].join(''); 
       tags[['</', a[i], '>'].join('')] = ['[/', a[i], ']'].join(''); 
      } 
      for (var html_tag in tags) { 
       if (tags.hasOwnProperty(html_tag)) { 
        html = html.replace.apply(
        html, editormode ? [html_tag, tags[html_tag], 'g'] : [tags[html_tag], html_tag, 'g']); 
       } 
      } 
      return html; 
     }; 

     var editor_body = document.getElementById('editor').contentWindow.document.body; 
     editor_body.innerHTML = replaceTagsByMode(editor_body.innerHTML, editormode); 


     editormode = "false"; 

    } else { 

     var replaceTagsByMode = function(html, editormode) { 
      var tags = {}; 
      for (var i=0, a=['b', 'i', 'u', 'strike', 'sub', 'sup']; i<a.length; i++) { 
       tags[['[', a[i], ']'].join('')] = ['<', a[i], '>'].join(''); 
       tags[['[/', a[i], ']'].join('')] = ['</', a[i], '>'].join(''); 
      } 
      for (var html_tag in tags) { 
       if (tags.hasOwnProperty(html_tag)) { 
        html = html.replace.apply(
        html, editormode ? [html_tag, tags[html_tag], 'g'] : [tags[html_tag], html_tag, 'g']); 
       } 
      } 
      return html; 
     }; 

     var editor_body = document.getElementById('editor').contentWindow.document.body; 
     editor_body.innerHTML = replaceTagsByMode(editor_body.innerHTML, editormode); 


     editormode = "true"; 

    } 
} 

Answer 1

juste passer à travers des questions similaires, mais on a remarqué ceci:

document.attachEvent("mouseup", dismissmenu, true); 

devrait être comme ceci je pense pour '.attachEvent':

document.attachEvent("onmouseup", dismissmenu, true); 

Je sais que l'une ou l'autre méthode de rattachement d'événement utilise directement la partie 'on'. Je crois que c'est IE qui fait. De plus, certains événements fonctionnent mieux avec l'élément 'body', par opposition au document. J'utilise la boîte à outils Dojo et la fonction dojo.connect() pour le réglage normal des événements et j'attache les événements onclick, etc. à l'élément body. La boîte à outils aide avec les différences de syntaxe comme ci-dessus. Maintient des problèmes comme celui-ci hors de l'équation.

Answer 2

Dans l'un de vos commentaires que vous notez ceci:

Les lignes qui font des choses comme ce donner des erreurs:

document.getElementById ('éditeur') contentWindow.document.. execCommand ("styleWithCSS", false, "false");

Il est dit que c'est un argument invalide.

Ce pourrait être parce que styleWithCSS n'est pas un identificateur de commande valide pour execCommand:

http://msdn.microsoft.com/en-us/library/ms533049%28v=VS.85%29.aspx