载入中
自定义HTML载入中... loading
一个基于jquery的简易ubb编辑器【支持IE&FF】 [原创 2007-11-21 23:09:14]   
字体变小 字体变大

var qihoo_module_ubbEditor = {
    _codeContainer : {},

    _controllBar : {},

    _imagePath : "." ,

    _defaultConfigData : [
    {"imgFile":"bold.gif" , "replaceText":"加粗" , "eventFun":function (){qihoo_module_ubbEditor.onBold();} , "idName":"ctlBold"},
    {"imgFile":"italic.gif" , "replaceText":"斜体" , "eventFun":function (){qihoo_module_ubbEditor.onItalic();}, "idName":"ctlItalic"},
    {"imgFile":"under.gif" , "replaceText":"下划线" , "eventFun":function (){qihoo_module_ubbEditor.onUnderLine();}, "idName":"ctlUnder"},
    {"imgFile":"link.gif" , "replaceText":"加入链接" , "eventFun":function (){qihoo_module_ubbEditor.onLink();}, "idName":"ctlLink"},
    {"imgFile":"image.gif" , "replaceText":"插入图片" , "eventFun":function (){qihoo_module_ubbEditor.onImage();}, "idName":"ctlImg"},
    {"imgFile":"rm.gif" , "replaceText":"插入视频" , "eventFun":function (){qihoo_module_ubbEditor.onVideo();}, "idName":"ctlVideo"},
    {"replaceText":"自动排版" , "eventFun":function (){qihoo_module_ubbEditor.onFormat();}, "idName":"ctlFormat"}
    ],

    _clientVer : parseInt(navigator.appVersion) ,


    _isIe : ((navigator.userAgent.toLowerCase().indexOf("msie") != -1) && (navigator.userAgent.toLowerCase().indexOf("opera") == -1)) ,

    init : function (containerId , controlBarlId  ,imagePath ,configData) {
        this._codeContainer = $("#"+containerId);

        this._controlBar = $("#"+controlBarlId);

        if (typeof(imagePath) != "undefined") this._imagePath = imagePath;

        if (typeof(configData) == "undefined") configData = this._defaultConfigData;

        for( var i in configData){
            tmp = $("#"+configData[i]["idName"]);
            if (typeof(configData[i]["imgFile"]) != "undefined" ){
                tmp.attr("src" , this._imagePath+"/"+configData[i]["imgFile"]);
                if (typeof(configData[i]["replaceText"]) != "undefined")  tmp.attr("alt" , configData[i]["replaceText"]);
            }
            else{
                tmp.html(configData[i]["replaceText"]);
            }

            eventKey = (typeof(configData[i]["eventKey"]) == "undefined") ? "click" : configData[i]["eventKey"];

            tmp.bind(eventKey , configData[i]["eventFun"]);
        }

        this._controlBar.insertBefore(this._codeContainer);
    } ,

    getControlBar : function(){
        return this._controlBar;
    } ,

    setSelectionText : function (openTag , closeTag ){
        this._codeContainer[0].focus();
        if ((this._clientVer >= 4) && this._isIe){
            theSelection = document.selection.createRange().text;

            if (theSelection != ''){
                document.selection.createRange().text = openTag + theSelection + closeTag;
            }
            else{
                this.insertAtCursor(openTag + closeTag);
            }
        }
        else {
            if (this._codeContainer[0].selectionEnd &&  (this._codeContainer[0].selectionEnd - this._codeContainer[0].selectionStart > 0)) {
                var startPos = this._codeContainer[0].selectionStart;
                var endPos =  this._codeContainer[0].selectionEnd;
                var prevValue = this._codeContainer.val();

                this._codeContainer.val(prevValue.substring( 0 , startPos ) + openTag + prevValue.substring(startPos,endPos) + closeTag + prevValue.slice(endPos));
            }

            else{
                this.insertAtCursor(openTag + closeTag);
            }
        }
    },

    getSelectionText : function (){
        this._codeContainer[0].focus();
        if ((this._clientVer >= 4) && this._isIe){
            return document.selection.createRange().text;
        }
        else {
            if (this._codeContainer[0].selectionEnd &&  (this._codeContainer[0].selectionEnd - this._codeContainer[0].selectionStart > 0)) {
                var startPos = this._codeContainer[0].selectionStart;
                var endPos =  this._codeContainer[0].selectionEnd;
                var prevValue = this._codeContainer.val();

                return prevValue.substring(startPos,endPos) + closeTag + prevValue.slice(endPos);
            }
        }

        return "";

    },

    insertAtCursor : function (text){
        this._codeContainer[0].focus();
        if( document.selection ){
            sel = document.selection.createRange();
            sel.text = text ;
        }
        else if( this._codeContainer[0].selectionStart || this._codeContainer[0].selectionStart == '0' ){
            var startPos = this._codeContainer[0].selectionStart;
            var endPos = this._codeContainer[0].selectionEnd;
            var prevValue = this._codeContainer.val();
           
            this._codeContainer.val(prevValue.substring(0, startPos) + text + prevValue.substring(endPos, prevValue.length));
        }
        else{
            this._codeContainer.val( this._codeContainer.val() + text);
        }
    },

    onFormat : function (){
        this._codeContainer.val("\n"+ this._codeContainer.val().replace(/ | /ig,"").replace(/\r\n/ig,"\n").replace(/\n{2,}/ig,"\n").replace(/\n/ig,"\n\n  ").replace("\n\n",""));
    },

    onBold : function (){
        this.setSelectionText("[b]","[/b]");
    },

    onItalic : function (){
        this.setSelectionText("[i]","[/i]");
    },

    onUnderLine : function () {
        this.setSelectionText("[u]","[/u]");
    },

    onLink : function (){
        var myUrl = prompt("请输入超链接地址):",  "http:\/\/");

        if (( myUrl != null ) && ( myUrl != "http://" )){
            selectText = this.getSelectionText();
            if (selectText){
                this.setSelectionText ( "[url=" + myUrl + "]","[/url]");
            }
            else{
                this.insertAtCursor("[url=" + myUrl + "]"+myUrl+"[/url]");
            }
        }
    },
   
    onImage : function () {
        var myPic = prompt("输入图片的地址", "http:\/\/");
   
        if ((myPic != null) && (myPic != "http://")){
            myPic = "\n[img]"+myPic+"[/img]\n";
           
            this.insertAtCursor(myPic);
        }
    },
   
    onVideo : function (){
        var myVideo = prompt("输入视频的超链接", "http:\/\/");

        if ((myVideo != null) && (myVideo != "http://")){
            myVideo = "\n[swf]"+myVideo+"[/swf]\n";
           
            this.insertAtCursor(myVideo);
        }  
    }    
}

分类: 工作笔记
所属版块: 科技
票数:
什么是“我顶”?
点击数:    评论数:
本文章引用通告地址(TrackBack Ping URL)为:
本文章尚未被引用。
发表评论
大 名:
(不填写则显示为匿名者)
网 址:
(您的网址,可以不填)
标 题:
内 容:
请根据下图中的字符输入验证码:
(您的评论将有可能审核后才能发表)
和讯个人门户 v1.0 | 和讯部落 | 客服中心