ProBoards RTE (WYSIWYG)

Note: This is unfinished, I have not got time to finish it, but i'm posting it here incase there is another coder who would like to carry on with it, or get ideas to create their own version.

<script type="text/javascript">
<!--

/********************************************
*
*    Open Source
*    ProBoards Rich Text Editor (WYSIWYG)
*
*    Created By Peter
*    Copyright © 2005 - 2006 pixelDepth.net
*    All rights reserved
*
*    Note: This is unfinished
*
**********************************************/

var GLOBALS = new Object();

function rte(){
    GLOBALS.RTE = this;

    this.IE = false;
    this.FF = false;

    if(document.attachEvent){
        this.IE = true;
    } else if(document.addEventListener){
        this.FF = true;
    }

    if(arguments[0] && arguments[0].constructor == Object){
        this.background_color = arguments[0].background_color || "";
        this.font_color = arguments[0].font_color || "";
        this.font_family = arguments[0].font_family || "";
        this.font_size = arguments[0].font_size || "";
        this.border_color = arguments[0].border_color || "";
    } else {
        this.set_defaults();
    }

    if((this.IE || this.FF) && document.designMode){
        this.setup_pb_area();
    }
}

rte.prototype.gid = function(id){
    return document.getElementById(id) || null;
}

rte.prototype.addEvent = function(obj, type, fn){
    if(obj.attachEvent){
        obj["e" + type + fn] = fn;
        obj[type + fn] = function(){
            obj["e" + type + fn](window.event);
        }

        obj.attachEvent("on" + type, obj[type + fn]);
    } else {
        obj.addEventListener(type, fn, false);
    }
}

rte.prototype.create_element = function(elem, attr){
    var elem = (typeof elem == "string")? document.createElement(elem) : elem;

    for(key in attr){
        if(key == "style"){
            for(a in attr[key]){
                elem.style = attr[key];
            }
        } else {
            for(a in attr[key]){
                elem.setAttribute(a, attr[key]);
            }
        }
    }

    return elem;
}

rte.prototype.exec = function(com, val){
    GLOBALS.EDITOR.CW.document.execCommand(com, false, val);
    GLOBALS.EDITOR.CW.focus();
}

rte.prototype.setup_pb_area = function(){
    var ubbc = [];
    var smileys = [];

    if(document.postForm && document.postForm.message){
        ({
       
            init: function(){
                this.setup_smileys_tags();
                this.remove_extras();
            },

            setup_smileys_tags: function(){
                var links = document.getElementsByTagName("a");

                for(a = 0; a < links.length; a ++){
                    if(links.item(a).href.match(/^javascript:add\(\W?/i)){
                        if(links.item(a).href.match(/^javascript:add\(\W?\[(.+?)\]/mi)){
                            links.item(a).id = RegExp.$1.split("=");

                            GLOBALS.RTE.addEvent(links.item(a), "click", function(evt){
                                switch(this.id.toLowerCase()){
                                    case "b" :
                                        GLOBALS.RTE.exec("bold", true);
                                        break;
                                    case "i" :
                                        GLOBALS.RTE.exec("italic", true);
                                        break;
                                    case "s" :
                                        GLOBALS.RTE.exec("strikethrough", true);
                                        break;
                                    case "sup" :
                                        GLOBALS.RTE.exec("superscript", true);
                                        break;
                                    case "sub" :
                                        GLOBALS.RTE.exec("subscript", true);
                                        break;
                                    case "u" :
                                        GLOBALS.RTE.exec("underline", true);
                                        break;
                                    case "center" :
                                        GLOBALS.RTE.exec("justifycenter", true);
                                        break;
                                    case "left" :
                                        GLOBALS.RTE.exec("justifyleft", true);
                                        break;
                                    case "right" :
                                        GLOBALS.RTE.exec("justifyright", true);
                                        break;
                                    case "blockquote" :
                                        GLOBALS.RTE.exec("indent", true);
                                        break;
                                }
   
                                var evt = (evt)? evt : event;
                       
                                if(evt.preventDefault){
                                    evt.preventDefault();
                                    evt.stopPropagation();
                                } else {
                                    evt.returnValue = false;
                                    evt.cancelBubble = true;
                                }
                       
                                return false;
                            });
                        } else {
                            GLOBALS.RTE.addEvent(links.item(a), "click", function(evt){
                                GLOBALS.RTE.exec("InsertImage", this.firstChild.src);
   
                                var evt = (evt)? evt : event;
                       
                                if(evt.preventDefault){
                                    evt.preventDefault();
                                    evt.stopPropagation();
                                } else {
                                    evt.returnValue = false;
                                    evt.cancelBubble = true;
                                }
                       
                                return false;
                            });
                        }

                        links.item(a).href = "#";
                    }
                }
            },

            remove_extras: function(){
                document.postForm.message.style.display = GLOBALS.RTE.gid("ta1").style.display = "none";
                GLOBALS.MSG = document.postForm.message;
                GLOBALS.MSG_CELL = GLOBALS.MSG.parentNode.parentNode;
            }

        }).init();

        this.create_area();
    }
}

rte.prototype.set_defaults = function(){
    this.background_color = "#ffffff";
    this.font_color = "#000000";
    this.font_family = "Verdana";
    this.font_size = 10;
    this.border_color = "#000000";
}

rte.prototype.create_area = function(){
    var frame_node = this.create_element("iframe", {
        style: {
            border: "1px solid " + this.border_color
        },

        set: {
            id: "rte",
            name: "rte",
            frameborder: 0,
            border: 0,
            width: "80%",
            height: 200,
            src: ""
        }
    });

    GLOBALS.MSG_CELL.insertBefore(frame_node, GLOBALS.MSG_CELL.firstChild);

    GLOBALS.EDITOR = document.getElementById("rte");

    this.addEvent(GLOBALS.EDITOR, "load", GLOBALS.RTE.write_html);
}

rte.prototype.write_html = function(){
    var frame_html = "";

    frame_html += '<html id="pbrte">\n';
    frame_html += '<head>\n';
    frame_html += '<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />\n';
    frame_html += '<style type="text/css">\n\n';
    frame_html += 'body {\n';
    frame_html += '\tbackground: ' + GLOBALS.RTE.background_color + ';\n';
    frame_html += '\tmargin: 0px;\n';
    frame_html += '\tpadding: 3px;\n';
    frame_html += '\tfont-family: ' + GLOBALS.RTE.font_family + ';\n';
    frame_html += '\tfont-size: ' + GLOBALS.RTE.font_size + ';\n';
    frame_html += '\tcolor: ' + GLOBALS.RTE.font_color + ';\n';
    frame_html += '}\n\n';
    frame_html += '</style>\n';
    frame_html += '</head>\n'
    frame_html += '<body>\n';
    frame_html += '</body>\n';
    frame_html += '</html>\n';

    GLOBALS.EDITOR.CW = GLOBALS.EDITOR.contentWindow;

    GLOBALS.EDITOR.CW.document.write(frame_html);

    GLOBALS.EDITOR.CW.document.designMode = "on";

    if(GLOBALS.RTE.FF){
        GLOBALS.EDITOR.CW.document.close();
    }
}

var rte = new rte({
    background_color: "#ffffff",
    font_color: "#000000",
    border_color: "#A4B2BC"
});

//-->
</script>

To test it, just stick it into the global footer.

Like I said, it is unfinished, if I get time I wouldn't mind finishing it. There is quite a bit to do, the HTML to UBBC conversion (pretty simple), and then UBBC to HTML (again, simple). Also need to add support for some of the other tags, the basic ones are done.

If you do want to continue with it, I suggest reading the MIDAS specification, has some useful information