Javascript Invalid Argument?

Question

Hellom

I'm new to JavaScript so please bare with me. I'm working on a custom WYSIWYG editor (no I do not want to use an already made one so please don't suggest it).

I'm having trouble getting it to work in Internet Explorer. It gives me an Invalid Arguement error on lines such as the following:

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

Here is the complete script:

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

From the documentation on MSDN, it appears that StyleWithCSS is not a command identifier that exists.