toolbar.js

asp的bbs程序

/*
  By Hangring
  #2007.11.02#
  ---
  工具栏
*/
var Toolbar = {
    ///
    // 是否全屏
    FullScreen : Url.QS()['FullScreen'] == '1' ? true : false,
    // 是否可改变编辑器尺寸
    Resizable : Url.QS()['Resizable'] == '1' ? true : false,
    
    // icon set
    buttons : {},
    iconLoaded : false,
    // path
    iconsRoot : 'images/',
    // icon src
    iconSrc : 'editorSkin.png',
    iconWidth : 20,
    iconHeight : 20,
    yOffset : 20,
    icons : {
        // ['display or not', 'x offset', 'width', 'title', 'content']
        fontName:[1, 0, 100, '字体', '字体'],
        fontSize:[1, 110, 60, '字号', '字号'],
        bold:[1, 240, 0, '粗体', ''],
        italic:[1, 280, 0, '斜体', ''],
        underline:[1, 320, 0, '下划线', ''],
        foreColor:[1, 360, 0, '前景色', ''],
        backColor:[1, 400, 0, '背景色', ''],
        justifyLeft:[1, 440, 0, '左对齐', ''],
        justifyCenter:[1, 480, 0, '居中对齐', ''],
        justifyRight:[1, 520, 0, '右对齐', ''],
        orderedList:[1, 560, 0, '有序列表', ''],
        unorderedList:[1, 600, 0, '无序列表', ''],
        indent:[1, 680, 0, '增加缩进', ''],
        outdent:[1, 640, 0, '减少缩进', ''],
        link:[1, 720, 0, '创建链接', ''],
        unlink:[1, 760, '取消链接', ''],
        face:[1, 'face.png', 50, '表情', '表情'],
        table:[1, 800, 0, '表格', ''],
        code:[1, 880, 0, '代码', ''],
        hide:[1, 920, 0, '如果这是一个主题，点击此按钮可将选定内容标识为需要回复才可浏览', ''],
        free:[1, 1240, 0, '如果是出售主题，使用本按钮可以将选定内容标记为免费内容，即无需购买就能查看', ''],
        quote:[1, 1200, 0, '引用', ''],
        fullScreen:[1, 1120, 50, '全屏', '全屏']
    },
    // 记录外部注册的按钮的名称
    regIcons : [],

    // 有关是否显示的配置参数
    config : {enableHtmlEdit:true},

    ///
    fontNamePanel : null,
    fontSizePanel : null,

    colorPanel : null,
    colorNode : null,
    colorType : '',

    justifyPanel : null,
    listPanel : null,
    indentPanel : null,

    facePanel : null,
    faceNode : null,
    // 表情相关参数，动态设置
    faceAbout : {faceList:{},width:24,height:24,defaultImg:'',path:'',lowpath:'',group:{}},

    tablePanel : null,

    ///
    // 字体列表
    fontNameList : [
        '宋体', '黑体', '楷体_GB2312', '隶书', '幼圆', 'Arial',
        'Arial Narrow', 'Arial Black', 'Comic Sans MS', 'Courier',
        'System', 'Times New Roman'
    ],

    // 字号列表
    fontSizeList : [
        {label:'极小', data:'1'},
        {label:'特小', data:'2'},
        {label:'小', data:'3'},
        {label:'中', data:'4'},
        {label:'大', data:'5'},
        {label:'特大', data:'6'},
        {label:'极大', data:'7'}
    ],

    ///
    init : function (tb, sb) {
        var self = this;

        if (Browser.IsIE56) {
            var img = new Image();
            img.onload = function () {
                self.createHead(tb);
                self.displayRegIcon(tb);
                self.iconLoaded = true;
                cEditor.Resize();
            }
            img.src = this.iconsRoot + this.iconSrc;
        }
        else {
            this.createHead(tb);
            this.displayRegIcon(tb);
        }
        this.createFoot(sb);
    },
    
    createHead : function (tb) {
        // 字体
        this.createFontName(this, tb);

        // 字号
        this.createFontSize(this, tb);

        // 粗体
        this.createBold(this, tb);

        // 斜体
        this.createItalic(this, tb);

        // 下划线
        this.createUnderline(this, tb);

        // 前景色
        this.createForeColor(this, tb);

        // 背景色
        this.createBackColor(this, tb);

        // 左对齐
        this.createJustifyLeft(this, tb);

        // 居中对齐
        this.createJustifyCenter(this, tb);

        // 右对齐
        this.createJustifyRight(this, tb);

        // 有序列表
        this.createOrderedList(this, tb);

        // 无序列表
        this.createUnorderedList(this, tb);

        // 减少缩进
        this.createOutdent(this, tb);

        // 增加缩进
        this.createIndent(this, tb);

        // 创建链接
        this.createLink(this, tb);

        // 取消链接
        this.createUnlink(this, tb);

        // 清除浮动
        var clear = CSS.AddClear(tb, CSS.LEFT);
        clear.style.height = '5px';

        // 表格
        this.createTable(this, tb);

        // code
        this.createCode(this, tb);
        
        // free
        this.createFree(this, tb);
        
        // hide
        this.createHide(this, tb);
        
        // quote
        this.createQuote(this, tb);

        // 表情
        this.createFace(this, tb);

        // 全屏
        this.createFullScreen(this, tb);
    },
    createFoot : function (sb) {
        // 转换按钮
        var wysiwyg = oNode.CreateNode('div');
        var curButton = wysiwyg;
        oNode.AddNode(wysiwyg, sb);
        CSS.AddClass(wysiwyg, 'one focus');
        wysiwyg.innerHTML = Config.ButWysiwyg;
        this.wysiwygClick = wysiwyg.onclick = function () {
            if (curButton == wysiwyg) return;
            if (cEditor.ChangeState(Config.WYSIWYG)) {
                CSS.RemoveClass(curButton, 'focus');
                CSS.AddClass(wysiwyg, 'focus');
                curButton = wysiwyg;
            }
        };
        var xhtml = oNode.CreateNode('div');
        oNode.AddNode(xhtml, sb);
        CSS.AddClass(xhtml, 'two');
        xhtml.innerHTML = Config.ButXhtml;
        this.xhtmlClick = xhtml.onclick = function () {
            if (curButton == xhtml) return;
            if (cEditor.ChangeState(Config.XHTML)) {
                CSS.RemoveClass(curButton, 'focus');
                CSS.AddClass(xhtml, 'focus');
                curButton = xhtml;
            }
        };
        var ubb = oNode.CreateNode('div');
        oNode.AddNode(ubb, sb);
        CSS.AddClass(ubb, 'three');
        ubb.innerHTML = Config.ButUbb;
        this.ubbClick = ubb.onclick = function () {
            if (curButton == ubb) return;
            if (cEditor.ChangeState(Config.UBB)) {
                CSS.RemoveClass(curButton, 'focus');
                CSS.AddClass(ubb, 'focus');
                curButton = ubb;
            }
        };
        // wysiwyg模式
        this.wysiwygMode = function () {
            cEditor.Mode = Config.WYSIWYG;
            xhtml.style.display
            = ubb.style.display
            = 'none';
        };
        // xhtml模式
        this.xhtmlMode = function () {
            cEditor.Mode = Config.XHTML;
            ubb.style.display = 'none';
        };
        // ubb模式
        this.ubbMode = function () {
            cEditor.Mode = Config.UBB;
            xhtml.style.display = 'none';
            CSS.ReplaceClass(ubb, 'three', 'two');
        };

        // control size
        if (this.Resizable) {
            var add = oNode.CreateNode('a');
            oNode.AddNode(add, sb);
            CSS.AddClass(add, 'add');
            add.href = 'javascript:;';
            add.onclick = function () {
                cEditor.AddHeight();
            };
            var minus = oNode.CreateNode('a');
            oNode.AddNode(minus, sb);
            CSS.AddClass(minus, 'minus');
            minus.href = 'javascript:;';
            minus.onclick = function () {
                cEditor.MinusHeight();
            };
            this.setResizable = function (resizable) {
                add.style.display = minus.style.display = resizable ? '' : 'none';
                '';
            };
        }
    },

    // 字体
    createFontName : function (toolbar, div) {
        if (! this.icons.fontName[0]) return;
        var fontName = this.buttons.fontName = this.createIcon(div, 'fontName');
        CSS.AddClass(fontName, 'fontname');
        fontName.onclick = function () {
            if (cEditor.isXHTML()) return;
            //if (!cEditor.isWYSIWYG()) return;
            if (toolbar.fontNamePanel) {
                document.body.removeChild(toolbar.fontNamePanel);
            }

            var oDiv = oNode.CreateNode('div');
            oDiv.style.overflow = 'hidden';
            for (var i = 0, len = toolbar.fontNameList.length; i < len; i++) {
                var oA = oNode.CreateNode('a');
                oA.style.display = 'block';
                oA.style.width = '100%';
                oA.style.color = '#000';
                oA.style.padding = '2px';
                oA.style.fontSize = '12px';
                oA.style.textDecoration = 'none';
                oA.style.fontFamily = toolbar.fontNameList[i];
                oA.href = 'javascript:void(0)';
                oA.onclick = function () {
                    if (cEditor.isWYSIWYG()) {
                        cEditor.SetStyle('FontName', this.innerHTML);
                        toolbar.fontNamePanel.style.display = 'none';
                        toolbar.response();
                    }
                    else {
                        cEditor.SetUBBStyle('[font=' + this.innerHTML + ']\x01[/font]');
                        toolbar.fontNamePanel.style.display = 'none';
                    }
                };
                oA.onmouseover = function () {CSS.ReplaceClass(this, 'menu-item-out', 'menu-item-over');};
                oA.onmouseout = function () {CSS.ReplaceClass(this, 'menu-item-over', 'menu-item-out');};

                oA.appendChild(document.createTextNode(toolbar.fontNameList[i]));

                oDiv.appendChild(oA);
            }
            var newLine = oNode.CreateNode('div');
            newLine.style.clear = 'both';
            oDiv.appendChild(newLine);

            toolbar.fontNamePanel = cEditor.Menu(window, 125, 0, oDiv);
            toolbar.fontNamePanel.style.top = Global.GetOffsetTop(this) + this.offsetHeight + 'px';
            toolbar.fontNamePanel.style.left = Global.GetOffsetLeft(this) + 'px';
        };
    },

    // 字号
    createFontSize : function (toolbar, div) {
        if (! this.icons.fontSize[0]) return;
        var fontSize = this.buttons.fontSize = this.createIcon(div, 'fontSize');
        CSS.AddClass(fontSize, 'fontsize');
        fontSize.onclick = function () {
            if (cEditor.isXHTML()) return;
            //if (!cEditor.isWYSIWYG()) return;
            if (toolbar.fontSizePanel) {
                document.body.removeChild(toolbar.fontSizePanel);
            }

            var oDiv = oNode.CreateNode('div');
            oDiv.style.overflow = 'hidden';
            for (var i = 0; i < toolbar.fontSizeList.length; i++) {
                var oA = oNode.CreateNode('a');
                oA.style.display = 'block';
                oA.style.width = '100%';
                oA.style.color = '#000';