htmlarea.php

很棒的在线教学系统

    var tas = document.getElementsByTagName("textarea");
    for (var i = tas.length; i > 0; (new HTMLArea(tas[--i], config)).generate());
};

/** Helper function: replaces the TEXTAREA with the given ID with HTMLArea. */
HTMLArea.replace = function(id, config) {
    var ta = HTMLArea.getElementById("textarea", id);
    return ta ? (new HTMLArea(ta, config)).generate() : null;
};

// Creates the toolbar and appends it to the _htmlarea
HTMLArea.prototype._createToolbar = function () {
    var editor = this;  // to access this in nested functions

    var toolbar = document.createElement("div");
    this._toolbar = toolbar;
    toolbar.className = "toolbar";
    toolbar.unselectable = "1";
    var tb_row = null;
    var tb_objects = new Object();
    this._toolbarObjects = tb_objects;

    // creates a new line in the toolbar
    function newLine() {
        var table = document.createElement("table");
        table.border = "0px";
        table.cellSpacing = "0px";
        table.cellPadding = "0px";
        toolbar.appendChild(table);
        // TBODY is required for IE, otherwise you don't see anything
        // in the TABLE.
        var tb_body = document.createElement("tbody");
        table.appendChild(tb_body);
        tb_row = document.createElement("tr");
        tb_body.appendChild(tb_row);
    }; // END of function: newLine
    // init first line
    newLine();

    function setButtonStatus(id, newval) {
        var oldval = this[id];
        var el = this.element;
        if (oldval != newval) {
            switch (id) {
                case "enabled":
                if (newval) {
                    HTMLArea._removeClass(el, "buttonDisabled");
                    el.disabled = false;
                } else {
                    HTMLArea._addClass(el, "buttonDisabled");
                    el.disabled = true;
                }
                break;
                case "active":
                if (newval) {
                    HTMLArea._addClass(el, "buttonPressed");
                } else {
                    HTMLArea._removeClass(el, "buttonPressed");
                }
                break;
            }
            this[id] = newval;
        }
    }; // END of function: setButtonStatus

    function createSelect(txt) {
        var options = null;
        var el = null;
        var cmd = null;
        var customSelects = editor.config.customSelects;
        var context = null;
        switch (txt) {
            case "fontsize":
            case "fontname":
            case "formatblock":
            case "language":
            options = editor.config[txt];
            cmd = txt;
            break;
            default:
            // try to fetch it from the list of registered selects
            cmd = txt;
            var dropdown = customSelects[cmd];
            if (typeof dropdown != "undefined") {
                options = dropdown.options;
                context = dropdown.context;
            } else {
                alert("ERROR [createSelect]:\nCan't find the requested dropdown definition");
            }
            break;
        }
        if (options) {
            el = document.createElement("select");
            var obj = {
                name    : txt, // field name
                element : el,   // the UI element (SELECT)
                enabled : true, // is it enabled?
                text    : false, // enabled in text mode?
                cmd : cmd, // command ID
                state   : setButtonStatus, // for changing state
                context : context
            };
            tb_objects[txt] = obj;
            for (var i in options) {
                var op = document.createElement("option");
                op.appendChild(document.createTextNode(i));
                op.value = options[i];
                el.appendChild(op);
            }
            HTMLArea._addEvent(el, "change", function () {
                editor._comboSelected(el, txt);
            });
        }
        editor.dropdowns[txt] = el;  // Keep track of the element for keyboard
                                     // access later.
        return el;
    }; // END of function: createSelect

    // appends a new button to toolbar
    function createButton(txt) {
        // the element that will be created
        var el = null;
        var btn = null;
        switch (txt) {
            case "separator":
            el = document.createElement("div");
            el.className = "separator";
            break;
            case "space":
            el = document.createElement("div");
            el.className = "space";
            break;
            case "linebreak":
            newLine();
            return false;
            case "textindicator":
            el = document.createElement("div");
            el.appendChild(document.createTextNode("A"));
            el.className = "indicator";
            el.title = HTMLArea.I18N.tooltips.textindicator;
            var obj = {
                name    : txt, // the button name (i.e. 'bold')
                element : el, // the UI element (DIV)
                enabled : true, // is it enabled?
                active  : false, // is it pressed?
                text    : false, // enabled in text mode?
                cmd : "textindicator", // the command ID
                state   : setButtonStatus // for changing state
            };
            tb_objects[txt] = obj;
            break;
            default:
            btn = editor.config.btnList[txt];
        }
        if (!el && btn) {
            el = document.createElement("div");
            el.title = btn[0];
            el.className = "button";
            // let's just pretend we have a button object, and
            // assign all the needed information to it.
            var obj = {
                name    : txt, // the button name (i.e. 'bold')
                element : el, // the UI element (DIV)
                enabled : true, // is it enabled?
                active  : false, // is it pressed?
                text    : btn[2], // enabled in text mode?
                cmd : btn[3], // the command ID
                state   : setButtonStatus, // for changing state
                context : btn[4] || null // enabled in a certain context?
            };
            tb_objects[txt] = obj;
            // handlers to emulate nice flat toolbar buttons
            HTMLArea._addEvent(el, "mouseover", function () {
                if (obj.enabled) {
                    HTMLArea._addClass(el, "buttonHover");
                }
            });
            HTMLArea._addEvent(el, "mouseout", function () {
                if (obj.enabled) with (HTMLArea) {
                    _removeClass(el, "buttonHover");
                    _removeClass(el, "buttonActive");
                    (obj.active) && _addClass(el, "buttonPressed");
                }
            });
            HTMLArea._addEvent(el, "mousedown", function (ev) {
                if (obj.enabled) with (HTMLArea) {
                    _addClass(el, "buttonActive");
                    _removeClass(el, "buttonPressed");
                    _stopEvent(is_ie ? window.event : ev);
                }
            });
            // when clicked, do the following:
            HTMLArea._addEvent(el, "click", function (ev) {
                if (obj.enabled) with (HTMLArea) {
                    _removeClass(el, "buttonActive");
                    _removeClass(el, "buttonHover");
                    obj.cmd(editor, obj.name, obj);
                    _stopEvent(is_ie ? window.event : ev);
                }
            });
            var img = document.createElement("img");
            img.src = btn[1];
            img.style.width = "18px";
            img.style.height = "18px";
            el.appendChild(img);
        } else if (!el) {
            el = createSelect(txt);
        }
        if (el) {
            var tb_cell = document.createElement("td");
            tb_row.appendChild(tb_cell);
            tb_cell.appendChild(el);
        } else {
            alert("FIXME: Unknown toolbar item: " + txt);
        }
        return el;
    };

    var first = true;
    for (var i in this.config.toolbar) {
        if (this.config.toolbar.propertyIsEnumerable(i)) { // fix for prototype.js compatibility
        if (!first) {
            createButton("linebreak");
        } else {
            first = false;
        }
        var group = this.config.toolbar[i];
        for (var j in group) {
                if (group.propertyIsEnumerable(j)) { // fix for prototype.js compatibility
            var code = group[j];
            if (/^([IT])\[(.*?)\]/.test(code)) {
                // special case, create text label
                var l7ed = RegExp.$1 == "I"; // localized?
                var label = RegExp.$2;
                if (l7ed) {
                    label = HTMLArea.I18N.custom[label];
                }
                var tb_cell = document.createElement("td");
                tb_row.appendChild(tb_cell);
                tb_cell.className = "label";
                tb_cell.innerHTML = label;
            } else {
                createButton(code);
                    }
                }
            }
        }
    }

    this._htmlArea.appendChild(toolbar);
};

HTMLArea.prototype._createStatusBar = function() {
    var statusbar = document.createElement("div");
    statusbar.className = "statusBar";
    this._htmlArea.appendChild(statusbar);
    this._statusBar = statusbar;
    // statusbar.appendChild(document.createTextNode(HTMLArea.I18N.msg["Path"] + ": "));
    // creates a holder for the path view
    div = document.createElement("span");
    div.className = "statusBarTree";
    div.innerHTML = HTMLArea.I18N.msg["Path"] + ": ";
    this._statusBarTree = div;
    this._statusBar.appendChild(div);
    if (!this.config.statusBar) {
        // disable it...
        statusbar.style.display = "none";
    }
};

// Creates the HTMLArea object and replaces the textarea with it.
HTMLArea.prototype.generate = function () {
    var editor = this;  // we'll need "this" in some nested functions

    // get the textarea
    var textarea = this._textArea;
    if (typeof textarea == "string") {
        // it's not element but ID
        this._textArea = textarea = HTMLArea.getElementById("textarea", textarea);
    }
    // Fix for IE's sticky bug. Editor doesn't load
    // editing area.
    var height;
    if ( textarea.offsetHeight && textarea.offsetHeight > 0 ) {
        height = textarea.offsetHeight;
    } else {
        height = 300;
    }
    this._ta_size = {
        w: textarea.offsetWidth,
        h: height
    };
    textarea.style.display = "none";

    // create the editor framework
    var htmlarea = document.createElement("div");
    htmlarea.className = "htmlarea";
    this._htmlArea = htmlarea;

    // insert the editor before the textarea.
    //Bug fix - unless the textarea is nested within its label, in which case insert editor before label.
    if (textarea.parentNode.nodeName.toLowerCase()=='label') {
        textarea.parentNode.parentNode.insertBefore(htmlarea,textarea.parentNode);
    }
    else {
        textarea.parentNode.insertBefore(htmlarea, textarea);
    }

    if (textarea.form) {
        // we have a form, on submit get the HTMLArea content and
        // update original textarea.
        var f = textarea.form;
        if (typeof f.onsubmit == "function") {
            var funcref = f.onsubmit;
            if (typeof f.__msh_prevOnSubmit == "undefined") {
                f.__msh_prevOnSubmit = [];
            }
            f.__msh_prevOnSubmit.push(funcref);
        }
        f.onsubmit = function() {
            // Moodle hack. Bug fix #2736
            var test = editor.getHTML();
            test = test.replace(/<br \/>/gi, '');
            test = test.replace(/\&nbsp\;/gi, '');
            test = test.trim();
            //alert(test + test.length);
            if (test.length < 1) {
                editor._textArea.value = test.trim();
            } else {
                editor._textArea.value = editor.getHTML();
            }
            // Moodle hack end.
            var a = this.__msh_prevOnSubmit;
            var ret = true;
            // call previous submit methods if they were there.
            if (typeof a != "undefined") {
                for (var i = a.length; --i >= 0;) {
                    ret = a[i]() && ret;
                }
            }
            return ret;
        };
        if (typeof f.onreset == "function") {
            var funcref = f.onreset;
            if (typeof f.__msh_prevOnReset == "undefined") {
                f.__msh_prevOnReset = [];
            }