Question

This is a code for a WYSIWYG text editor I am working on. I’m working on the HTML to BBCODE and vice versa part now. It works fine in Fire Fox but not in Internet Explorer. Thoughts?

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

Just passing thru with similar issues, but noticed this:

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

should be like this I think for ‘.attachEvent’:

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

I know one or the other event attachment methods use the ‘on’ part directly. I believe it is IE that does. Plus, some events work better attached to the ‘body’ element, as opposed to the document. I use the Dojo toolkit and dojo.connect() function for normal event setting and attach onclick, etc. events to the body element. The toolkit helps with differences in syntax like above. Keeps issues like this out of the equation.