EXT3.X的HtmlEditor拓展,包括图片上传和文件上传,兼容IE、谷歌和火狐

var HTMLEditor = Ext.extend(Ext.form.HtmlEditor, {
addImage : function() {
        var editor = this;
        if (!Ext.isIE) {
         editor.focus();
        }
        var imgform = new Ext.FormPanel({
            region : 'center',
            labelWidth : 60,
            frame : true,
            bodyStyle : 'padding:5px 5px 0',
            autoScroll : true,
            border : false,
            fileUpload : true,
            labelAlign : "right",
            items : [{
                        xtype : 'fileuploadfield',
                        fieldLabel : '选择文件',
                        name : 'userfile',
                        id : 'userfile',
                        buttonText : '浏览...',
                        allowBlank : false,
                        blankText : '文件不能为空',
                        emptyText : '请选择图片',
                        anchor : '99%'
                    },{
                     xtype : 'numberfield',
                     hiddenName : 'imgWidth',
                        fieldLabel : '宽',
                        name : 'imgWidth',
                        id : 'imageWidth',
                        anchor : '80%'
                    },{
                     xtype : 'numberfield',
                     hiddenName : 'imgHeight',
                        fieldLabel : '高',
                        name : 'imgHeight',
                        id : 'imageHeight',
                        anchor : '80%'
                    }],
            buttons : [{
                text : '上传',
                type : 'submit',
                handler : function() {
                    if (!imgform.form.isValid()) {return;}
                    imgform.form.submit({
                     waitTitle: "请稍候",
                        waitMsg: '正在上传...',
                        url: ctx + '/system/newsReport/HTMLEditorAddImg',
                        success : function(form, action) {
                            var element = document.createElement("img");
                            var imgWidth = action.result.imgWidth;
                            var imgHeight = action.result.imgHeight;
                            element.src = action.result.filePath;
                            if(imgWidth!=null&&imgWidth!=0)
                             element.width = action.result.imgWidth;
                            if(imgHeight!=null&&imgHeight!=0)
                             element.height = action.result.imgHeight;
                            if (Ext.isIE) {//IE处理
                             //editor.insertAtCursor(element.outerHTML);
                             var myEditor = editor.iframe.contentWindow;
                             var doc = myEditor.document;
                             doc.focus();
                              r = doc.selection ? doc.selection.createRange() : null;
                             doc.execCommand("insertImage", false, "newsContent");  
                                var code = doc.body.innerHTML;
                                code = code.replace(/(src="newsContent")/ig, 'id="newsContent"'); 
                                try {
                                 doc.body.innerHTML = code;
                                }catch(e){
                                 return false;
                                }  
                                if(r!=null){  
                                        try {
                                         r.move("character");
                                         r.select();
                                        }catch(e){}  
                                }; 
                                var insertcodes = '<img src="'+ action.result.filePath +'" border="0"'; 
                                if(imgWidth!=null&&imgWidth!=0)
                                 insertcodes +=' width="'+ imgWidth +'"';
                                if(imgHeight!=null&&imgHeight!=0)
                                 insertcodes +=' height="'+ imgHeight +'"';
                                insertcodes += '/>';
                                var s = doc.body.appendChild(doc.createElement("nobr"));  
                                s.innerHTML = insertcodes;
                                myEditor.focus();
                            } else {
                                var selection = editor.win.getSelection();
                                if (!selection.isCollapsed) {
                                    selection.deleteFromDocument();
                                }
                                selection.getRangeAt(0).insertNode(element);
                            }
                            form.reset();        
                            win.close();
                        },
                        failure : function(form, action) {
                            form.reset();
                            if (action.failureType == Ext.form.Action.SERVER_INVALID)
                                Ext.Msg.alert('提示',action.result.msg);
                        }
                    });
                }
            }, {
                text : '关闭',
                type : 'submit',
                handler : function() {
                    win.close(this);
                }
            }]
        });
        var win = new Ext.Window({                  
         title : "上传图片",                    
         width : 300,                    
         height : 200,                    
         modal : true,                    
         border : false,                    
         iconCls : "imageAdd",                    
         layout : "fit",                    
         items : imgform                
        });       
        win.show(this);
    },
    addFile : function() {
        var editor = this;
        var fileform = new Ext.FormPanel({
         region : 'center',
         labelWidth : 60,
         frame : true,
         bodyStyle : 'padding:5px 5px 0',
         autoScroll : true,
         border : false,
         fileUpload : true,
         items : [{
          xtype : 'fileuploadfield',
                fieldLabel : '选择文件',
                name : 'userfile_F',
              id : 'userfile_F',
                buttonText : '浏览...',
                allowBlank : false,
                blankText : '文件不能为空',
                emptyText : '请选择文件',
                height : 25,
              anchor : '98%'
           }],
         buttons : [{
          text : '上传',
          type : 'submit',
          handler : function() {
          var furl="";//文件物理地址
          var fname="";//文件名称
          furl=fileform.form.findField('userfile_F').getValue();
          var type=furl.substring(furl.lastIndexOf(".")+1,furl.length).toLowerCase();
          if (furl==""||furl==null) {return;}
          if(type!='doc'&&type!='xls'&&type!='xlsx'&&type!='zip'&&type!='docx'&&type!='pdf'){
          alert('仅支持上传doc、docx、xls、xlsx、pdf、zip格式的文件!');
          return;
          }
          fname=furl.substring(furl.lastIndexOf("\\")+1);
          fileform.form.submit({
          url: ctx + '/system/newsReport/HTMLEditorAddFiles',
          waitMsg : '正在上传......',
          waitTitle : '请等待',
          success : function(form, action) {
          //Ext.Msg.alert('提示',action.result.msg);
          var element = document.createElement("a");
          element.href = action.result.filePath;
          element.target = '_blank';
          element.innerHTML = fname;
          if (Ext.isIE) {
          //editor.insertAtCursor(element.outerHTML);
          var myEditor = editor.iframe.contentWindow;
                             var doc = myEditor.document;
                             doc.focus();
                              r = doc.selection ? doc.selection.createRange() : null;
                             doc.execCommand("insertImage", false, "filesContent");  
                                var code = doc.body.innerHTML;
                                code = code.replace(/(src="filesContent")/ig, 'id="filesContent"');  
                                try {
                                 doc.body.innerHTML = code;
                                }catch(e){
                                 return false;
                                }  
                                if(r!=null){  
                                        try {
                                         r.move("character");
                                         r.select();
                                        }catch(e){}  
                                };  
                                var insertcodes = '<a href="'+ action.result.filePath +'" target="_blank">"'+fname+'"</a>';  
                                var s = doc.body.appendChild(doc.createElement("nobr"));  
                                s.innerHTML = insertcodes;
                                myEditor.focus(); 
          } else {
          var selection = editor.win.getSelection();
          if (!selection.isCollapsed) {
          selection.deleteFromDocument();
          }
          selection.getRangeAt(0).insertNode(element);
          }
          winFile.close();
          },
          failure : function(form, action) {
          form.reset();
          if (action.failureType == Ext.form.Action.SERVER_INVALID)
          Ext.Msg.alert('警告',action.result.msg);
          }
          });
          }
         }, {
          text : '关闭',
          type : 'submit',
          handler : function() {
           winFile.close(this);
          }
         }]
        });


        var winFile = new Ext.Window({
           title : "上传附件",
           id : 'picwin',
           width : 400,
           height : 120,
           modal : true,
           border : false,
           layout : "fit",
           iconCls : 'fileAdd',
           items : fileform
          });
        winFile.show(this);
       
     },//上传附件的扩展
    createToolbar : function(editor) {
        HTMLEditor.superclass.createToolbar.call(this, editor);
        this.tb.insertButton(16, {
                    cls : "x-btn-icon",
                    iconCls : "imageAdd",
                    handler : this.addImage,
                    scope : this
                });
        this.tb.insertButton(17, {
            cls : "x-btn-icon",
            iconCls : "fileAdd",
            handler : this.addFile,
            scope : this
        });
    }
});
Ext.reg('StarHtmleditor', HTMLEditor);

你可能感兴趣的:(ExtJs,包括图片上传和文件上传,兼容IE谷歌和火狐)