views:

69

answers:

1

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";

    }
}