html:

    
         
         
         
             
         ......        ......        ......           
     
            　　
            　　
            　　
            　　
            
     
      
     
       

 

trumbowyg.css

.trumbowyg-box,.editor{
   clear:both;display:block;position:relative;border:1px solid #DDD;width:100%;min-height:300px;margin:17px auto}.trumbowyg-box .editor{
   margin:0 auto;background:#FEFEFE}.trumbowyg-box.trumbowyg-fullscreen{
   background:#FEFEFE}.trumbowyg-editor,.trumbowyg-textarea{
   position:relative;padding:1% 2%;min-height:300px;width:96%;border-style:none;resize:none;outline:none}.trumbowyg-box-blur .trumbowyg-editor *{
   color:transparent !important;text-shadow:0 0 7px #333}.trumbowyg-box-blur .trumbowyg-editor img{
   filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=20);opacity:0.2}.trumbowyg-textarea{
   position:relative;display:block;overflow:auto;border:none;white-space:normal}.trumbowyg-button-pane{
   position:relative;width:100%;background:#ecf0f1;border-bottom:1px solid #d7e0e2;margin:0;padding:0;list-style-type:none;line-height:10px}.trumbowyg-button-pane li{
   display:inline-block;text-align:center;overflow:hidden}.trumbowyg-button-pane li.trumbowyg-separator{
   width:1px;background:#d7e0e2;margin:0 5px;height:35px}.trumbowyg-button-pane.trumbowyg-disable li:not(.trumbowyg-not-disable) button{
   opacity:.2;cursor:default}.trumbowyg-button-pane.trumbowyg-disable li.trumbowyg-separator{
   background:#e3e9eb}.trumbowyg-button-pane:not(.trumbowyg-disable) li button:hover,.trumbowyg-button-pane:not(.trumbowyg-disable) li button:focus,.trumbowyg-button-pane li button.trumbowyg-active,.trumbowyg-button-pane li.trumbowyg-not-disable button:hover,.trumbowyg-button-pane li.trumbowyg-not-disable button:focus{
   outline:none}.trumbowyg-button-pane li .trumbowyg-open-dropdown:after{
   display:block;content:" ";position:absolute;top:25px;right:3px;height:0;width:0;border:3px solid transparent;border-top-color:#555}.trumbowyg-button-pane .trumbowyg-buttons-right{
   float:right;width:auto}.trumbowyg-button-pane .trumbowyg-buttons-right button{
   float:left}.trumbowyg-dropdown{
   width:200px;border:1px solid #ecf0f1;padding:5px 0;border-top:none;background:#FFF;margin-left:-1px;-moz-box-shadow:rgba(0,0,0,0.1) 0 2px 3px;-webkit-box-shadow:rgba(0,0,0,0.1) 0 2px 3px;box-shadow:rgba(0,0,0,0.1) 0 2px 3px}.trumbowyg-dropdown button{
   display:block;width:100%;height:35px;line-height:35px;text-decoration:none;background:#FFF;padding:0 14px;color:#333;border:none;cursor:pointer;text-align:left;font-size:15px;-moz-transition:all 0.15s;-o-transition:all 0.15s;-webkit-transition:all 0.15s;transition:all 0.15s}.trumbowyg-dropdown button:hover,.trumbowyg-dropdown button:focus{
   background:#ecf0f1}.trumbowyg-modal{
   position:absolute;top:0;left:50%;margin-left:-260px;width:520px;height:290px;overflow:hidden}.trumbowyg-modal-box{
   position:absolute;top:0;left:50%;margin-left:-250px;width:400px;padding: 10px 10px 35px 30px;z-index:1;background-color:#FFF;text-align:center;-moz-box-shadow:rgba(0,0,0,0.2) 0 2px 3px;-webkit-box-shadow:rgba(0,0,0,0.2) 0 2px 3px;box-shadow:rgba(0,0,0,0.2) 0 2px 3px}.trumbowyg-modal-box .trumbowyg-modal-title{
   font-size:24px;font-weight:bold;margin:0 0 20px;padding:15px 0 13px;display:block;border-bottom:1px solid #EEE;color:#333;background:#fbfcfc}.trumbowyg-modal-box .trumbowyg-progress{
   width:80%;background:#F00;height:3px;position:absolute;top:58px}.trumbowyg-modal-box .trumbowyg-progress .trumbowyg-progress-bar{
   background:#2BC06A;height:100%;-moz-transition:width 0.15s linear;-o-transition:width 0.15s linear;-webkit-transition:width 0.15s linear;transition:width 0.15s linear}.trumbowyg-modal-box input,input[type=text]{
   width:100%;}.trumbowyg-modal-box label{
   display:block;position:relative;margin:15px 12px;height:27px;line-height:27px;overflow:hidden}.trumbowyg-modal-box label .trumbowyg-input-infos{
   display:block;text-align:left;height:25px;line-height:25px;-moz-transition:all 0.15s;-o-transition:all 0.15s;-webkit-transition:all 0.15s;transition:all 0.15s}.trumbowyg-modal-box label .trumbowyg-input-infos span{
   display:block;color:#859fa5;background-color:#fbfcfc;border:1px solid #DEDEDE;padding:0 2%;width:19.5%}.trumbowyg-modal-box label .trumbowyg-input-infos span.trumbowyg-msg-error{
   color:#e74c3c}.trumbowyg-modal-box label.trumbowyg-input-error input,.trumbowyg-modal-box label.trumbowyg-input-error textarea{
   border:1px solid #e74c3c}.trumbowyg-modal-box label.trumbowyg-input-error .trumbowyg-input-infos{
   margin-top:-27px}.trumbowyg-modal-box label input{
   position:absolute;top:0;right:20px;height:25px;line-height:25px;border:1px solid #DEDEDE;background:transparent;width:72%;padding:0 2%;margin:0 0 0 23%;-moz-transition:all 0.15s;-o-transition:all 0.15s;-webkit-transition:all 0.15s;transition:all 0.15s}.trumbowyg-modal-box label input:hover,.trumbowyg-modal-box label input:focus{
   outline:none;border:1px solid #95a5a6}.trumbowyg-modal-box label input:focus{
   background:rgba(230,230,255,0.1)}.trumbowyg-modal-box .error{
   margin-top:25px;display:block;color:red}.trumbowyg-modal-box .trumbowyg-modal-button{
   position:absolute;bottom:10px;right:0;text-decoration:none;color:#FFF;display:block;width:70px; height:35px;line-height:33px;margin:0 10px;background-color:#333;border:none;border-top:none;cursor:pointer;font-family:"Trebuchet MS", Helvetica, Verdana, sans-serif;-moz-transition:all 0.15s;-o-transition:all 0.15s;-webkit-transition:all 0.15s;transition:all 0.15s;margin-right: 100px;}.trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit{
   right:110px;background:#2bc06a}.trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit:hover,.trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit:focus{
   background:#40d47e;outline:none}.trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit:active{
   background:#25a25a}.trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset{
   background:#b33528}.trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset:hover,.trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset:focus{
   background:#d14233;outline:none}.trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset:active{
   background:#962d22}.trumbowyg-overlay{
   position:absolute;background-color:rgba(255,255,255,0.5);width:100%;left:0;display:none}.trumbowyg-fullscreen.trumbowyg-box,.trumbowyg-fullscreen .editor{
   border:none}.trumbowyg-fullscreen .trumbowyg-overlay{
   height:100% !important}.trumbowyg-editor object,.trumbowyg-editor embed,.trumbowyg-editor video,.trumbowyg-editor img{
   max-width:100%}.trumbowyg-editor video,.trumbowyg-editor img{
   cursor:move}.trumbowyg-editor.trumbowyg-reset-css{
   background:#FEFEFE !important;font-family:"Trebuchet MS", Helvetica, Verdana, sans-serif !important;font-size:14px !important;line-height:1.45em !important;white-space:normal !important;color:#333}.trumbowyg-editor.trumbowyg-reset-css a{
   color:#15c !important;text-decoration:underline !important}.trumbowyg-editor.trumbowyg-reset-css div,.trumbowyg-editor.trumbowyg-reset-css p,.trumbowyg-editor.trumbowyg-reset-css ul,.trumbowyg-editor.trumbowyg-reset-css ol,.trumbowyg-editor.trumbowyg-reset-css blockquote{
   box-shadow:none !important;background:none !important;margin:0 !important;margin-bottom:15px !important;line-height:1.4em !important;font-family:"Trebuchet MS", Helvetica, Verdana, sans-serif !important;font-size:14px !important;border:none}.trumbowyg-editor.trumbowyg-reset-css iframe,.trumbowyg-editor.trumbowyg-reset-css object,.trumbowyg-editor.trumbowyg-reset-css hr{
   margin-bottom:15px !important}.trumbowyg-editor.trumbowyg-reset-css blockquote{
   margin-left:32px !important;font-style:italic !important;color:#555}.trumbowyg-editor.trumbowyg-reset-css ul,.trumbowyg-editor.trumbowyg-reset-css ol{
   padding-left:20px !important}.trumbowyg-editor.trumbowyg-reset-css ul ul,.trumbowyg-editor.trumbowyg-reset-css ol ol,.trumbowyg-editor.trumbowyg-reset-css ul ol,.trumbowyg-editor.trumbowyg-reset-css ol ul{
   border:none;margin:2px !important;padding:0 !important;padding-left:24px !important}.trumbowyg-editor.trumbowyg-reset-css hr{
   display:block;height:1px;border:none;border-top:1px solid #CCC}.trumbowyg-editor.trumbowyg-reset-css h1,.trumbowyg-editor.trumbowyg-reset-css h2,.trumbowyg-editor.trumbowyg-reset-css h3,.trumbowyg-editor.trumbowyg-reset-css h4{
   color:#111;background:none;margin:0 !important;padding:0 !important;font-weight:bold}.trumbowyg-editor.trumbowyg-reset-css h1{
   font-size:32px !important;line-height:38px !important;margin-bottom:20px !important}.trumbowyg-editor.trumbowyg-reset-css h2{
   font-size:26px !important;line-height:34px !important;margin-bottom:15px !important}.trumbowyg-editor.trumbowyg-reset-css h3{
   font-size:22px !important;line-height:28px !important;margin-bottom:7px !important}.trumbowyg-editor.trumbowyg-reset-css h4{
   font-size:16px !important;line-height:22px !important;margin-bottom:7px !important}.trumbowyg-button-pane li button{
   display:block;position:relative;text-indent:-9999px;width:35px;height:35px;overflow:hidden;background:transparent url('icons-sa75ce98b2b.png') no-repeat;border:none;cursor:pointer;-moz-transition:all 0.15s;-o-transition:all 0.15s;-webkit-transition:all 0.15s;transition:all 0.15s;transition:background-color .15s, background-image .15s, opacity .15s}.trumbowyg-button-pane li button.trumbowyg-viewHTML-button{
   background-position:5px -545px}.trumbowyg-button-pane li button.trumbowyg-formatting-button{
   background-position:5px -120px}.trumbowyg-button-pane li button.trumbowyg-bold-button,.trumbowyg-button-pane li button.trumbowyg-strong-button{
   background-position:5px -45px}.trumbowyg-button-pane li button.trumbowyg-italic-button,.trumbowyg-button-pane li button.trumbowyg-em-button{
   background-position:5px -270px}.trumbowyg-button-pane li button.trumbowyg-underline-button{
   background-position:5px -470px}.trumbowyg-button-pane li button.trumbowyg-strikethrough-button,.trumbowyg-button-pane li button.trumbowyg-del-button{
   background-position:5px -445px}.trumbowyg-button-pane li button.trumbowyg-link-button{
   background-position:5px -345px}.trumbowyg-button-pane li button.trumbowyg-insertImage-button{
   background-position:5px -245px}.trumbowyg-button-pane li button.trumbowyg-justifyLeft-button{
   background-position:5px -320px}.trumbowyg-button-pane li button.trumbowyg-justifyCenter-button{
   background-position:5px -70px}.trumbowyg-button-pane li button.trumbowyg-justifyRight-button{
   background-position:5px -395px}.trumbowyg-button-pane li button.trumbowyg-justifyFull-button{
   background-position:5px -295px}.trumbowyg-button-pane li button.trumbowyg-unorderedList-button{
   background-position:5px -495px}.trumbowyg-button-pane li button.trumbowyg-orderedList-button{
   background-position:5px -370px}.trumbowyg-button-pane li button.trumbowyg-horizontalRule-button{
   background-position:5px -220px}.trumbowyg-button-pane li button.trumbowyg-fullscreen-button{
   background-position:5px -170px}.trumbowyg-button-pane li button.trumbowyg-close-button{
   background-position:5px -95px}.trumbowyg-fullscreen .trumbowyg-button-pane li button.trumbowyg-fullscreen-button{
   background-position:5px -145px}.trumbowyg-button-pane li:first-child button{
   margin-left:6px}.trumbowyg-button-pane li:last-child button{
   margin-right:6px}.trumbowyg-fr .trumbowyg-button-pane li button.trumbowyg-bold-button,.trumbowyg-fr .trumbowyg-button-pane li button.trumbowyg-strong-button{
   background-position:5px -195px}.trumbowyg-fr .trumbowyg-button-pane li button.trumbowyg-underline-button{
   background-position:5px -420px}.trumbowyg-fr .trumbowyg-button-pane li button.trumbowyg-strikethrough-button,.trumbowyg-fr .trumbowyg-button-pane li button.trumbowyg-del-button{
   background-position:5px -20px}@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 4 / 3), only screen and (min-device-pixel-ratio: 1.3), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx){
   .trumbowyg-button-pane li button{background-size:72%;background-image:url('../images/icons-2x-s9034954e6d.png')}.trumbowyg-button-pane li button.trumbowyg-viewHTML-button{
   background-position:5px -545px}.trumbowyg-button-pane li button.trumbowyg-formatting-button{
   background-position:5px -120px}.trumbowyg-button-pane li button.trumbowyg-bold-button,.trumbowyg-button-pane li button.trumbowyg-strong-button{
   background-position:5px -45px}.trumbowyg-button-pane li button.trumbowyg-italic-button,.trumbowyg-button-pane li button.trumbowyg-em-button{
   background-position:5px -270px}.trumbowyg-button-pane li button.trumbowyg-underline-button{
   background-position:5px -470px}.trumbowyg-button-pane li button.trumbowyg-strikethrough-button,.trumbowyg-button-pane li button.trumbowyg-del-button{
   background-position:5px -445px}.trumbowyg-button-pane li button.trumbowyg-link-button{
   background-position:5px -345px}.trumbowyg-button-pane li button.trumbowyg-insertImage-button{
   background-position:5px -245px}.trumbowyg-button-pane li button.trumbowyg-justifyLeft-button{
   background-position:5px -320px}.trumbowyg-button-pane li button.trumbowyg-justifyCenter-button{
   background-position:5px -70px}.trumbowyg-button-pane li button.trumbowyg-justifyRight-button{
   background-position:5px -395px}.trumbowyg-button-pane li button.trumbowyg-justifyFull-button{
   background-position:5px -295px}.trumbowyg-button-pane li button.trumbowyg-unorderedList-button{
   background-position:5px -495px}.trumbowyg-button-pane li button.trumbowyg-orderedList-button{
   background-position:5px -370px}.trumbowyg-button-pane li button.trumbowyg-horizontalRule-button{
   background-position:5px -220px}.trumbowyg-button-pane li button.trumbowyg-fullscreen-button{
   background-position:5px -170px}.trumbowyg-button-pane li button.trumbowyg-close-button{
   background-position:5px -95px}.trumbowyg-fullscreen .trumbowyg-button-pane li a.trumbowyg-fullscreen-button{
   background-position:5px -145px}.trumbowyg-fr .trumbowyg-button-pane li button.trumbowyg-bold-button,.trumbowyg-fr .trumbowyg-button-pane li button.trumbowyg-strong-button{
   background-position:5px -195px}.trumbowyg-fr .trumbowyg-button-pane li button.trumbowyg-underline-button{
   background-position:5px -420px}.trumbowyg-fr .trumbowyg-button-pane li button.trumbowyg-strikethrough-button,.trumbowyg-fr .trumbowyg-button-pane li button.trumbowyg-del-button{
   background-position:5px -20px}}html, body {
   margin: 0;padding: 0;}header {
   text-align: center;}#main {
   max-width: 960px;margin: 0 auto;}

 

trumbowyg.js

/* =========================================================== * trumbowyg.js v1.0 * Core code of Trumbowyg plugin * http://alex-d.github.com/Trumbowyg * =========================================================== * Author : Alexandre Demode (Alex-D) *          Twitter : @AlexandreDemode *          Website : alex-d.fr */$.trumbowyg = {    langs: {        en: {            viewHTML:       "View HTML",            formatting:     "Formatting",            p:              "Paragraph",            blockquote:     "Quote",            code:           "Code",            header:         "Header",            bold:           "Bold",            italic:         "Italic",            strikethrough:  "Stroke",            underline:      "Underline",            strong:         "Strong",            em:             "Emphasis",            del:            "Deleted",            unorderedList:  "Unordered list",            orderedList:    "Ordered list",            insertImage:    "Insert Image",            insertVideo:    "Insert Video",            link:           "Link",            createLink:     "Insert link",            unlink:         "Remove link",            justifyLeft:    "Align Left",            justifyCenter:  "Align Center",            justifyRight:   "Align Right",            justifyFull:    "Align Justify",            horizontalRule: "Insert horizontal rule",            fullscreen:     "fullscreen",            close:          "Close",            submit:         "Confirm",            reset:          "Cancel",            invalidUrl:     "Invalid URL",            required:       "Required",            description:    "Description",            title:          "Title",            text:           "Text"        }    },    // User default options    opts: {},    btnsGrps: {        design:     ['bold', 'italic', 'underline', 'strikethrough'],        semantic:   ['strong', 'em', 'del'],        justify:    ['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull'],        lists:      ['unorderedList', 'orderedList']    }};(function($){    $.fn.trumbowyg = function(opts, params){        if($.isObject(opts) || opts == null){            return this.each(function(){                if(!$(this).data('trumbowyg'))                    $(this).data('trumbowyg', new Trumbowyg(this, opts));            });        } else if(this.length == 1){            try {                var t = $(this).data('trumbowyg');                switch(opts){                    // Modal box                    case 'openModal':                        return t.openModal(params.title, params.content);                    case 'closeModal':                        return t.closeModal();                    case 'openModalInsert':                        return t.openModalInsert(params.title, params.fields, params.callback);                    // Selection                    case 'saveSelection':                        return t.saveSelection();                    case 'getSelection':                        return t.selection;                    case 'getSelectedText':                        return t.selection+'';                    case 'restoreSelection':                        return t.restoreSelection();                    // Destroy                    case 'destroy':                        return t.destroy();                    // Empty                    case 'empty':                        return t.empty();                    // Public options                    case 'lang':                        return t.lang;                    case 'duration':                        return t.o.duration;                    // HTML                    case 'html':                        return t.html(params);                }            } catch(e){}        }        return false;    };    var Trumbowyg = function(editorElem, opts){        // jQuery object of the editor        this.$e       = $(editorElem);        this.$creator = $(editorElem);        // Extend with options        opts = $.extend(true, {}, opts, $.trumbowyg.opts);        // Localization management        if(typeof opts.lang === 'undefined' || typeof $.trumbowyg.langs[opts.lang] === 'undefined')            this.lang = $.trumbowyg.langs['en'];        else            this.lang = $.extend(true, {}, $.trumbowyg.langs['en'], $.trumbowyg.langs[opts.lang]);        // Defaults Options        this.o = $.extend(true, {            lang: 'en',            dir: 'ltr',            duration: 200, // Duration of modal box animations            mobile: false,            tablet: true,            closable: false,            fullscreenable: true,            fixedBtnPane: false,            fixedFullWidth: false,            semantic: false,            resetCss: false,            autogrow: false,            prefix: 'trumbowyg-',            convertLink: true,            btns: ['viewHTML',                        '|', 'formatting',                        '|', $.trumbowyg.btnsGrps.design,                        '|', 'link',                        '|', 'insertImage',                        '|', $.trumbowyg.btnsGrps.justify,                        '|', $.trumbowyg.btnsGrps.lists,                        '|', 'horizontalRule'],            btnsAdd: [],            /**             * When the button is associated to a empty object             * func and title attributs are defined from the button key value             *             * For example             *      foo: {}             * is equivalent to :             *      foo: {             *          func: 'foo',             *          title: this.lang.foo             *      }             */            btnsDef: {                viewHTML: {                    func: 'toggle'                },                p: {                    func: 'formatBlock'                },                blockquote: {                    func: 'formatBlock'                },                h1: {                    func: 'formatBlock',                    title: this.lang.header + ' 1'                },                h2: {                    func: 'formatBlock',                    title: this.lang.header + ' 2'                },                h3: {                    func: 'formatBlock',                    title: this.lang.header + ' 3'                },                h4: {                    func: 'formatBlock',                    title: this.lang.header + ' 4'                },                bold: {},                italic: {},                underline: {},                strikethrough: {},                strong: {                    func: 'bold'                },                em: {                    func: 'italic'                },                del: {                    func: 'strikethrough'                },                createLink: {},                unlink: {},                insertImage: {},                justifyLeft: {},                justifyCenter: {},                justifyRight: {},                justifyFull: {},                unorderedList: {                    func: 'insertUnorderedList'                },                orderedList: {                    func: 'insertOrderedList'                },                horizontalRule: {                    func: 'insertHorizontalRule'                },                // Dropdowns                formatting: {                    dropdown: ['p', 'blockquote', 'h1', 'h2', 'h3', 'h4']                },                link:       {                    dropdown: ['createLink', 'unlink']                }            }        }, opts);        if(this.o.semantic && !opts.btns)            this.o.btns = [                'viewHTML',                '|', 'formatting',                '|', $.trumbowyg.btnsGrps.semantic,                '|', 'link',                '|', 'insertImage',                '|', $.trumbowyg.btnsGrps.justify,                '|', $.trumbowyg.btnsGrps.lists,                '|', 'horizontalRule'            ];        else if(opts && opts.btns)            this.o.btns = opts.btns;        this.init();    }    Trumbowyg.prototype = {        init: function(){            this.height = this.$e.css('height');            if(this.isEnabled()){                this.buildEditor(true);                return;            }            this.buildEditor();            this.buildBtnPane();            this.fixedBtnPaneEvents();            this.buildOverlay();        },        buildEditor: function(disable){            if(disable === true){                if(!this.$e.is('textarea')){                    var textarea = this.buildTextarea().val(this.$e.val());                    this.$e.hide().after(textarea);                }                return;            }            this.$box = $('
     
', {                'class': this.o.prefix + 'box ' + this.o.prefix + this.o.lang + ' trumbowyg'            });            this.isTextarea = true;            if(this.$e.is('textarea'))                this.$editor = $('
     
');            else {                this.$editor = this.$e;                this.$e = this.buildTextarea().val(this.$e.val());                this.isTextarea = false;            }            this.$e.hide()                   .addClass(this.o.prefix + 'textarea');            var html = '';            if(this.isTextarea){                html = this.$e.val();                this.$box.insertAfter(this.$e)                         .append(this.$editor)                         .append(this.$e);            } else {                html = this.$editor.html();                this.$box.insertAfter(this.$editor)                         .append(this.$e)                         .append(this.$editor);                this.syncCode();            }            this.$editor.addClass(this.o.prefix + 'editor')                        .attr('contenteditable', true)                        .attr('dir', this.o.dir)                        .html(html);            if(this.o.resetCss)                this.$editor.addClass(this.o.prefix + 'reset-css');            if(!this.o.autogrow){                $.each([this.$editor, this.$e], $.proxy(function(i, $el){                    $el.css({                        overflow: 'auto'                    });                }, this));            }            if(this.o.semantic){                this.$editor.html(                    this.$editor.html()                        .replace("
", "
")                        .replace("&nsbp;", "")                );                this.semanticCode();            }            var that = this;            this.$editor            .on('dblclick', 'img', function(){                var $img = $(this);                that.openModalInsert(that.lang.insertImage, {                    url: {                        label: 'URL',                        value: $img.attr('src'),                        required: true                    },                    alt: {                        label: 'description',                        value: $img.attr('alt')                    }                }, function(values){                    $img.attr('src', values['url']);                    $img.attr('alt', values['alt']);                });                return false;            })            .on('keyup', function(e){                that.semanticCode(false, e.which === 13);            })            .on('blur', function(){                that.syncCode();            });        },        // Build the Textarea which contain HTML generated code        buildTextarea: function(){            return $('', {                'name': this.$e.attr('id'),                'height': this.height            });        },        // Build button pane, use o.btns and o.btnsAdd options        buildBtnPane: function(){            var t = this;            if(t.o.btns === false) return;            var pfx = t.o.prefix;            t.$btnPane = $('
     
', {                'class': pfx + 'button-pane'            });            $.each(t.o.btns.concat(t.o.btnsAdd), $.proxy(function(i, btn){                // Managment of group of buttons                try {                    var b = btn.split('btnGrp-');                    if(b[1] != undefined)                        btn = $.trumbowyg.btnsGrps[b[1]];                } catch(e){}                if(!$.isArray(btn)) btn = [btn];                $.each(btn, $.proxy(function(i, btn){                    try { // Prevent buildBtn error                        var $li = $('
');                        if(btn === '|') // It's a separator                            $li.addClass(pfx + 'separator');                        else if(t.isSupportedBtn(btn)){ // It's a supported button                            if(btn === 'viewHTML')                                $li.addClass(pfx + 'not-disable');                            $li.append(t.buildBtn(btn));                        }                        t.$btnPane.append($li);                    } catch(e){}                }, t));            }, t));            // Build right li for fullscreen and close buttons            var $liRight = $('
', {                'class': pfx + 'not-disable ' + pfx + 'buttons-right'            });            // Add the fullscreen button            if(t.o.fullscreenable)                $liRight                    .append(t.buildRightBtn('fullscreen')                    .on('click', $.proxy(function(e){                        var cssClass = pfx + 'fullscreen';                        t.$box.toggleClass(cssClass);                        if(t.$box.hasClass(cssClass)){                            $('body').css('overflow', 'hidden');                            t.$box.css({                                position: 'fixed',                                top: 0,                                left: 0,                                width: '100%',                                margin: 0,                                padding: 0,                                zIndex: 99999                            });                            $([t.$editor, t.$e]).each(function(){                                $(this).css({                                                                        overflow: 'auto'                                });                            });                            t.$btnPane.css('width', '100%');                            $(".trumbowyg-fullscreen .editor").css("height",$(window).height()-65);                        } else {                            $('body').css('overflow', 'auto');                            t.$box.removeAttr('style');                            if(!t.o.autogrow){                                h = t.height;                                $([t.$editor, t.$e]).each(function(i, $el){                                    $el.css('height', h);                                });                            }                        }                        $(window).trigger('scroll');                    }, t)));            // Build and add close button            if(t.o.closable)                $liRight                    .append(t.buildRightBtn('close')                    .on('click', $.proxy(function(e){                        var cssClass = pfx + 'fullscreen';                        if(t.$box.hasClass(cssClass))                            $('body').css('overflow', 'auto');                        t.destroy();                    }, t)));            // Add right li only if isn't empty            if($liRight.not(':empty'))                t.$btnPane.append($liRight);            t.$box.prepend(t.$btnPane);        },        // Build a button and his action        buildBtn: function(name){            var pfx = this.o.prefix,                btnDef = this.o.btnsDef[name],                t = this,                textDef = this.lang[name] || name.charAt(0).toUpperCase() + name.slice(1);            var $btn = $('', {                'type': 'button',                'class': pfx + name +'-button' + (btnDef.ico ? ' '+ pfx + btnDef.ico +'-button' : ''),                'text': btnDef.text || btnDef.title || textDef,                'title': btnDef.title || btnDef.text || textDef,                'mousedown': function(e){                    if(!btnDef.dropdown || t.$box.find('.'+name+'-'+pfx + 'dropdown').is(':hidden'))                        $('body').trigger('mousedown');                    if(t.$btnPane.hasClass(pfx + 'disable')                        && !$(this).parent().hasClass(pfx + 'not-disable'))                        return false;                    t.execCommand((btnDef.dropdown ? 'dropdown' : false) || btnDef.func || name,                                     btnDef.param || name);                    e.stopPropagation();                    e.preventDefault();                    return false;                }            });            if(btnDef.dropdown){                $btn.addClass(pfx + 'open-dropdown');                var cssClass = pfx + 'dropdown';                var dropdown = $('
     
', {                    'class': name + '-' + cssClass + ' ' + cssClass + ' ' + pfx + 'fixed-top'                });                for(var i = 0, c = btnDef.dropdown.length; i < c; i++){                    if(t.o.btnsDef[btnDef.dropdown[i]] && t.isSupportedBtn(btnDef.dropdown[i]))                        dropdown.append(t.buildSubBtn(btnDef.dropdown[i]));                }                this.$box.append(dropdown.hide());            }            return $btn;        },        // Build a button for dropdown menu        buildSubBtn: function(name){            var btnDef = this.o.btnsDef[name];            return $('', {                'type': 'button',                'text': btnDef.text || btnDef.title || this.lang[name] || name,                'mousedown': $.proxy(function(e){                    $('body').trigger('mousedown');                    this.execCommand(btnDef.func || name,                                     btnDef.param || name);                    e.stopPropagation();                    e.preventDefault();                    return false;                }, this)            });        },        // Build a button for right li        buildRightBtn: function(name){            return $('', {                'type': 'button',                'class': this.o.prefix + name+'-button',                'title': this.lang[name],                'text': this.lang[name]            });        },        // Check if button is supported        isSupportedBtn: function(btn){            return typeof this.o.btnsDef[btn].isSupported !== 'function' || this.o.btnsDef[btn].isSupported()        },        // Build overlay for modal box        buildOverlay: function(){            return this.$overlay = $('
     
', {                'class': this.o.prefix + 'overlay'            }).css({                top: this.$btnPane.outerHeight(),                height: (parseInt(this.$editor.outerHeight()) + 1) + 'px'            }).appendTo(this.$box);        },        showOverlay: function(){            $(window).trigger('scroll');            this.$overlay.fadeIn(this.o.duration);            this.$box.addClass(this.o.prefix + 'box-blur');        },        hideOverlay: function(){            this.$overlay.fadeOut(this.o.duration/4);            this.$box.removeClass(this.o.prefix + 'box-blur');        },        // Management of fixed button pane        fixedBtnPaneEvents: function(){            if(!this.o.fixedBtnPane)                return;            this.isFixed = false;            $(window).on('scroll', $.proxy(function(e){                if(!this.$box)                    return;                this.syncCode();                var wScroll = $(window).scrollTop(),                    offset = this.$box.offset().top + 1,                    toFixed = (wScroll - offset > 0) && ((wScroll - offset - parseInt(this.height)) < 0);                if(toFixed){                    if(!this.isFixed){                        this.isFixed = true;                        this.$btnPane.css({                            position: 'fixed',                            top: 0,                            left: (this.o.fixedFullWidth) ? '0' : 'auto',                            width: (this.o.fixedFullWidth) ? '100%' : ((parseInt(this.$box.css('width'))-1) + 'px'),                            zIndex: 7                        });                        this.$editor.css({ marginTop: this.$btnPane.css('height') });                        this.$e.css({ marginTop: this.$btnPane.css('height') });                    }                    $('.' + this.o.prefix + 'fixed-top', this.$box).css({                        position: this.o.fixedFullWidth ? 'fixed' : 'absolute',                        top: this.o.fixedFullWidth ? this.$btnPane.outerHeight() : parseInt(this.$btnPane.outerHeight()) + (wScroll - offset) + 'px',                        zIndex: 15                    });                } else if(this.isFixed) {                    this.isFixed = false;                    this.$btnPane.css({ position: 'relative' });                    this.$editor.css({ marginTop: 0 });                    this.$e.css({ marginTop: 0 });                    $('.' + this.o.prefix + 'fixed-top', this.$box).css({                        position: 'absolute',                        top: this.$btnPane.outerHeight()                    });                }            }, this));        },        // Destroy the editor        destroy: function(){            var html = this.html();            if(this.isTextarea)                this.$box.after(this.$e.css({height: this.height})                                       .val(html)                                       .removeClass(this.o.prefix + 'textarea')                                       .show());            else                this.$box.after(this.$editor.css({height: this.height})                                            .removeClass(this.o.prefix + 'editor')                                            .attr('contenteditable', false)                                            .html(html)                                            .show());            this.$box.remove();            this.$creator.removeData('trumbowyg');        },        // Empty the editor        empty: function(){            this.$e.val('');            this.syncCode(true);        },        // Function call when click on viewHTML button        toggle: function(){            this.semanticCode(false, true);            this.$editor.toggle();            this.$e.toggle();            this.$btnPane.toggleClass(this.o.prefix + 'disable');            this.$btnPane.find('.'+this.o.prefix + 'viewHTML-button').toggleClass(this.o.prefix + 'active');        },        // Open dropdown when click on a button which open that        dropdown: function(name){            var pfx = this.o.prefix;            var $dropdown = this.$box.find('.'+name+'-'+pfx + 'dropdown'),                $btn = this.$btnPane.find('.'+pfx+name+'-button');            if($dropdown.is(':hidden')){                $btn.addClass(this.o.prefix + 'active');                $dropdown.css({                    position: 'absolute',                    top: this.$btnPane.outerHeight(),                    left: (this.o.fixedFullWidth && this.isFixed) ? $btn.offset().left+'px' : ($btn.offset().left - this.$btnPane.offset().left)+'px'                }).show();                $(window).trigger('scroll');                $('body').on('mousedown', $.proxy(function(e){                    $('.' + pfx + 'dropdown').hide();                    $('.' + pfx + 'active').removeClass(pfx + 'active');                    $('body').off('mousedown');                }, this));            } else {                $('body').trigger('mousedown');            }        },        // HTML Code management        html: function(html){            if(html){                this.$e.val(html);                this.syncCode(true);                return tbw;            } else                return this.$e.val();        },        syncCode: function(force){            if(!force && this.$editor.is(':visible'))                this.$e.val(this.$editor.html());            else                this.$editor.html(this.$e.val());            if(this.o.autogrow){                this.height = this.$editor.css('height');                this.$e.css({ height: this.height });            }        },        // Analyse and update to semantic code        // @param force : force to sync code from textarea        // @param full  : wrap text nodes in 
        semanticCode: function(force, full){            this.syncCode(force);            if(this.o.semantic){                this.semanticTag('b', 'strong');                this.semanticTag('i', 'em');                this.semanticTag('strike', 'del');                if(full){                    // Wrap text nodes in p                    this.$editor.contents()                    .filter(function(){                        // Only non-empty text nodes                        return this.nodeType === 3 && $.trim(this.nodeValue).length > 0;                    }).wrap('
').end()                    // Remove all br                    .filter("br").remove();                    this.saveSelection();                    this.semanticTag('div', 'p');                    this.restoreSelection();                }                this.$e.val(this.$editor.html());            }        },        semanticTag: function(oldTag, newTag){            $(oldTag, this.$editor).each(function(){                $(this).replaceWith(function(){ return '<'+newTag+'>' + $(this).html() + '
     '; });            });        },        // Function call when user click on « Insert Link »        createLink: function(){            var that = this;            this.saveSelection();            this.openModalInsert(this.lang.createLink, {                url: {                    label: 'URL',                    value: 'http://',                    required: true                },                title: {                    label: this.lang.title,                    value: this.selection                },                text: {                    label: this.lang.text,                    value: this.selection                }            }, function(values){                that.execCommand('createLink', values['url']);                var link = $(['a[href="', values['url'], '"]:not([title])'].join(''), that.$box);                if($.trim(values['text']).length !== 0)                    link.text(values['text']);                if($.trim(values['title']).length !== 0)                    link.attr('title', values['title']);                return true;            });        },        insertImage: function(){ //图片上传            var that = this;            this.saveSelection();            this.openModalInsert(this.lang.insertImage, {                url: {                    label: 'URL',                    value: '',                    required: true                },                alt: {                    label: 'description',                    value: this.selection                }            }, function(values){                that.execCommand('insertImage', values['url']);                $(['img[src="', values['url'], '"]:not([alt])'].join(''), that.$box).attr('alt', values['alt']);                return true;            });        },        /*         * Call method of trumbowyg if exist         * else try to call anonymous function         * and finaly native execCommand         */        execCommand: function(cmd, param){            if(cmd != 'dropdown')                this.$editor.focus();            try {                this[cmd](param);            } catch(e){                try {                    cmd(param, this);                } catch(e){                    this.$editor.focus();                    if(cmd == 'insertHorizontalRule')                        param = null;                    document.execCommand(cmd, false, param);                }            }            this.syncCode();        },        formatBlock: function(param){            if($.browser.msie)                param = '<' + param + '>';            document.execCommand('formatBlock', false, param);        },        // Open a modal box        openModal: function(title, content){            var pfx = this.o.prefix;            // No open a modal box when exist other modal box            if($('.' + pfx + 'modal-box', this.$box).size() > 0)                return false;            this.saveSelection();            this.showOverlay();            // Disable all btnPane btns            this.$btnPane.addClass(pfx + 'disable');            $('.' + pfx + 'not-disable', this.$btnPane)                .not('.' + pfx + 'buttons-right')                .removeClass(pfx + 'not-disable')                .addClass(pfx + 'not-disable-old');            // Build out of ModalBox, it's the mask for animations            var $modal = $('
     
', {                'class': pfx + 'modal ' + pfx + 'fixed-top'            }).css({                top: (parseInt(this.$btnPane.css('height')) + 1) + 'px'            }).appendTo(this.$box);            // Click on overflay close modal by cancelling them            this.$overlay.one('click', function(e){                e.preventDefault();                $modal.trigger(pfx + 'cancel');            });            $e = this.$editor;            // Build the form            $form = $('
     
      ', {                action: 'javascript:void(null);',                html: content            })            .on('submit', function(e){                e.preventDefault();                $modal.trigger(pfx + 'confirm');            })            .on('reset', function(e){                e.preventDefault();                $modal.trigger(pfx + 'cancel');            });            // Build ModalBox and animate to show them            var $modalBox = $('
      
', {                'class': pfx + 'modal-box',                html: $form            })            .css({                top:     '-' + parseInt(this.$btnPane.outerHeight()) + 'px',                opacity: 0            })            .appendTo($modal)            .animate({                top:     0,                opacity: 1            }, this.o.duration / 2);            // Append title            $('
      ', {                text: title,                'class': pfx + 'modal-title'            }).prependTo($modalBox);            // Focus in modal box            $modalBox.find('input:first').focus();            // Append Confirm and Cancel buttons            this.buildModalBtn('submit', $modalBox);            this.buildModalBtn('reset', $modalBox);            $('body').trigger('scroll');            return $modal;        },        buildModalBtn: function(name, modal){            return $('
      ', {                'class': this.o.prefix + 'modal-button ' + this.o.prefix + 'modal-' + name,                'type': name,                'text': this.lang[name] || name            }).appendTo(modal.find('form'));        },        // close current modal box        closeModal: function(){            var pfx = this.o.prefix;            this.$btnPane.removeClass(pfx + 'disable');            this.$overlay.off();            $('.' + this.o.prefix + 'not-disable-old', this.$btnPane)                .removeClass(pfx + 'not-disable-old')                .addClass(pfx + 'not-disable');            var that = this,                $modalBox = $('.' + pfx + 'modal-box', this.$box);            $modalBox.animate({                top: '-' + $modalBox.css('height')            }, this.o.duration/2, function(){                $(this).parent().remove();                that.hideOverlay();            });        },        // Preformated build and management modal        openModalInsert: function(title, fields, cmd){            var html = '',                pfx  = this.o.prefix;            for(f in fields){                var fd = fields[f];                label = (fd.label == undefined)                    ? (this.lang[f] ? this.lang[f] : f.charAt(0).toUpperCase() + f.slice(1))                    : (this.lang[fd.label] ? this.lang[fd.label] : fd.label)                ;                if(fd.name == undefined)                    fd.name = f;                if(!fd.pattern && f == 'url'){                    fd.pattern = /^(http|https):\/\/([\w~#!:.?+=&%@!\-\/]+)$/;                    fd.patternError = this.lang.invalidUrl;                }                html += '
      '+label+'';            }            var modBox = this.openModal(title, html),                that = this;            modBox            .on(pfx + 'confirm', function(){                var $form = $(this).find('form'),                    valid  = true,                    values = {};                for(f in fields) {                    var $field = $('input[name="'+f+'"]', $form);                    values[f] = $field.val();                    // Validate value                    if(fields[f].required && (values[f] == null || values[f] == undefined || $.trim(values[f]) == "")) {                        valid  = false;                        that.addErrorOnModalField($field, that.lang.required);                    } else if(fields[f].pattern && !fields[f].pattern.test(values[f])) {                        valid  = false;                        that.addErrorOnModalField($field, fields[f].patternError);                    }                }                if(valid) {                    that.restoreSelection();                    if(cmd(values, fields)) {                        that.syncCode();                        that.closeModal();                        modBox.off(pfx + 'confirm');                    }                }            })            .one(pfx + 'cancel', function(){                modBox.off(pfx + 'confirm');                that.closeModal();                that.restoreSelection();            });            return modBox;        },        addErrorOnModalField: function($field, err){            var $label = $field.parent(),                pfx    = this.o.prefix;            $label.addClass(pfx + 'input-error');            $field.on('change keyup', function(){ $label.removeClass(pfx + 'input-error'); });            $label.find('input+span').append('
      '+ err +'');        },        // Selection management        saveSelection: function(){            this.selection = null;            if(window.getSelection){                var sel = window.getSelection();                if(sel.getRangeAt && sel.rangeCount)                    this.selection = sel.getRangeAt(0);            } else if(document.selection && document.selection.createRange){                this.selection = document.selection.createRange();            }        },        restoreSelection: function(){            range = this.selection;            if(range){                if(window.getSelection){                    var sel = window.getSelection();                    sel.removeAllRanges();                    sel.addRange(range);                } else if(document.selection && range.select){                    range.select();                }            }        },        // Return true if must enable Trumbowyg on this mobile device        isEnabled: function(){            var mobile = "iPhone|iPod|Android|BlackBerry|Windows\sPhone|ZuneWP7";            var exprTablet = new RegExp("(iPad|webOS)");            var exprMobile = new RegExp("("+mobile+")");            return (this.o.tablet === true && exprTablet.test(navigator.userAgent))                    || (this.o.mobile === true && exprMobile.test(navigator.userAgent));        }    };    /* isObject */    var toString = Object.prototype.toString, hasOwnProp = Object.prototype.hasOwnProperty;    $.isObject = function(obj) { if(toString.call(obj) !== "[object Object]") return false; var key; for(key in obj){} return !key || hasOwnProp.call(obj, key); };    $.isString = function(str){ return typeof(str) === 'string' };})(jQuery);function del() {    var element=document.getElementById("demoImage");     if(element)      {         element.parentNode.removeChild(element);      }  }function show_element(e) {      if(!e)     {          var e = window.event;       }    //获取事件点击元素      var targ = e.target;      //获取元素名称     var tname = targ.tagName;    var oDiv=document.getElementById('odiv');    if(tname=="IMG")     {        var scrollTop=Math.max(document.documentElement.scrollTop,document.body.scrollTop);        oDiv.style.left=e.clientX+5+'px';         oDiv.style.top=e.clientY+5+scrollTop+'px';         oDiv.style.display="inline";        targ.width=targ.width;        var s=document.getElementById('demoImage');        if(s!=null)         {            s.id="";         }        targ.id='demoImage'     }else{            var wait = setInterval(function(){                if (oDiv != 0 && oDiv != null && oDiv != undefined) {                    clearInterval(wait);                    oDiv.style.display="none";                }            },50);     } }function tim(m) {    var s=document.getElementById('demoImage');    s.width=s.width+m;    s.width=s.width; }function sub(m) {    var s=document.getElementById('demoImage');    if(s!=null)     {        if(m!=0)         {            var t=s.width/10;            while(t>0)             {                if(m==1)                    setTimeout('tim(1)','50');                else                    setTimeout('tim(-1);','50');                t=t-1;            }        }        else            s.width=-1;        s.width=s.width;    }}      /* =========================================================== * zh_cn.js * Simplified Chinese translation for Trumbowyg * http://alex-d.github.com/Trumbowyg * =========================================================== * Author : Liu Kai (akai) *          Twitter : @akai404 *          Github : https://github.com/akai */$.trumbowyg.langs.zh_cn = {    viewHTML:       "源代码",    formatting:     "格式",    p:              "段落",    blockquote:     "引用",    code:           "代码",    header:         "标题",    bold:           "加粗",    italic:         "斜体",    strikethrough:  "删除线",    underline:      "下划线",    strong:         "加粗",    em:             "斜体",    del:            "删除线",    unorderedList:  "无序列表",    orderedList:    "有序列表",    image:          "图片",    insertImage:    "网络图片",    upload:         "本地上传",     uploadError:    "上传失败",    insertVideo:    "插入视频",    link:           "超链接",    createLink:     "插入链接",    unlink:         "取消链接",    align:          "对齐方式",    justifyLeft:    "居左对齐",    justifyCenter:  "居中对齐",    justifyRight:   "居右对齐",    justifyFull:    "两端对齐",    horizontalRule: "插入分隔线",    fullscreen:     "全屏",    close:          "关闭",    submit:         "确定",    reset:          "取消",    invalidUrl:     "无效的 URL",    required:       "必需的",    description:    "描述",    title:          "标题",    text:           "文字"}$(function(){    $.trumbowyg.btnsGrps.test = ['bold','italic','underline','link'];    $('#customized-buttonpane').trumbowyg({        lang: 'zh_cn',        fixedBtnPane: true,        btnsDef: {            align: {                dropdown: ['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull'],                ico: 'justifyLeft'            },            image: {                dropdown: ['insertImage', 'upload'],                ico: 'insertImage'            }        },        btns: ['viewHTML',            '|', 'formatting',            '|', 'btnGrp-test',            '|', 'align',            '|', 'btnGrp-lists',            '|', 'image']    });    $('.editor').on('dblclick', function(e){        $(this).trumbowyg({            lang: 'zh_cn',            closable: false,            fixedBtnPane: true        });    });});
     

 

trumbowyg.upload.js

/* =========================================================== * trumbowyg.upload.js v1.0 * Upload plugin for Trumbowyg * http://alex-d.github.com/Trumbowyg * =========================================================== * Author : Alexandre Demode (Alex-D) *          Twitter : @AlexandreDemode *          Website : alex-d.fr */(function($){    addXhrProgressEvent();    $.extend(true, $.trumbowyg, {        upload: {            serverPath: urlcore + '/file/upload/batch'        },        opts: {            btnsDef: {                upload: {                    func: function(params, tbw){                        var file,                            pfx = tbw.o.prefix;                        var $modal = tbw.openModalInsert(                            // Title                            tbw.lang['upload'],                            // Fields                            {                                file: {                                    type: 'file',                                    required: true                                },                                alt: {                                    label: 'description'                                }                            },                            // Callback                            function(values, fields){                                var data = new FormData();                                data.append('files', file);                                if($('.' + pfx +'progress', $modal).length == 0)                                    $('.' + pfx + 'modal-title', $modal)                                    .after(                                        $('
     
', {                                            'class': pfx +'progress'                                        })                                        .append(                                            $('
     
', {                                                'class': pfx +'progress-bar'                                            })                                        )                                    );                                $.ajax({                                    url:            $.trumbowyg.upload.serverPath,                                    type:           'POST',                                    data:           data,                                    cache:          false,                                    dataType:       'json',                                    processData:    false,                                    contentType:    false,                                    progressUpload: function(e){                                        $('.' + pfx + 'progress').html(                                            '
     
'+                                            parseInt(e.loaded * 100 / e.total) + '%'                                        );                                    },                                    success: function(data){                                        if (data.success == true) {                                            for(var i in data.data){                                                tbw.execCommand('insertImage', data.data[i]);                                            }                                            setTimeout(function(){                                                tbw.closeModal();                                            }, 250);                                        } else {                                            tbw.addErrorOnModalField(                                                $('input[type=file]', $modal),                                                tbw.lang[data.message]                                            );                                        }                                    },                                    error: function(data){                                        tbw.addErrorOnModalField(                                            $('input[type=file]', $modal),                                            tbw.lang['uploadError']                                        );                                    }                                });                            }                        );                        $('input[type=file]').on('change', function(e){                            file = e.target.files[0];                        });                    }                }            }        }    });    function addXhrProgressEvent(){        var originalXhr = $.ajaxSettings.xhr;        $.ajaxSetup({            xhr: function() {                var req  = originalXhr(),                    that = this;                if(req && typeof req.upload == "object" && that.progressUpload !== undefined)                    req.upload.addEventListener("progress", function(e){                        that.progressUpload(e);                    }, false);                return req;            }        });    }})(jQuery);

 

附件下载地址(包含图标和js)：