可上传图片的htmlEditor

扩展EXT htmlEditor js

//////////////////////////////////////////////////////////////////////////////////////////////////
HTMLEditor=Ext.extend(Ext.form.HtmlEditor,{  
     codeStyle:'<br/><pre style="border-right: #999999 1px dotted; padding-right: 5px; border-top: #999999 1px dotted; padding-left: 5px; font-size: 12px; padding-bottom: 5px; margin-left: 10px; border-left: #999999 1px dotted; margin-right: 10px; padding-top: 5px; border-bottom: #999999 1px dotted; background-color: #eeeeee">{0}</pre><br/>',  
     onRender : function(ct, position){       
         HTMLEditor.superclass.onRender.call(this, ct, position);  
         if(this.keys){  
            if(!this.keys.length){  
            this.keyMap = new Ext.KeyMap(this.getEditorBody(), this.keys);  
            }  
            else{                 
                this.keyMap = new Ext.KeyMap(this.getEditorBody(),this.keys[0]);  
                for(var i=1;i<this.keys.length;i++)this.keyMap.addBinding(this.keys[i]);  
            }  
            this.keyMap.stopEvent=true;  
         }  
     },  
       addImage:function(){  
        function insertImage(){ 
            var editor=this;  
            //editor.insertAtCursor("<br/><img src='upload/IMG_1198.JPG'/></br>");  
            win.upload(function(ret){  
                if(ret){                      
                    s="<br/><img src="+ret.path;  
                    if(ret.width)s+=" width="+ret.width;  
                    if(ret.height)s+=" height="+ret.height;  
                    s+=" /><br/>";  
                    editor.insertAtCursor(s);  
                    win.close();  
                }                 
                });  
        };  
    var win=new UploadImageWindow({modal:false,iconCls:"icon-img",  
        buttons:[{text:"确定",handler:insertImage,scope:this},{text:"取消",handler:function(){win.close();}}]});  
        win.show();  
    },  
    addCode:function(){  
        function insertCode(){  
            var value=win.getComponent("codes").getValue();  
            this.insertAtCursor(String.format(this.codeStyle,value));  
            win.close();  
        };  
        var win=new Ext.Window({title:"添加代码",  
                width:500,  
                height:300,  
                modal:true,  
                iconCls:"icon-code",  
                layout:"fit",  
                items:{xtype:"textarea",id:"codes"},  
                buttons:[{text:"确定",handler:insertCode,scope:this},{text:"取消",handler:function(){win.close();}}]});  
        win.show();  
    },    
    createToolbar:function(editor){  
        HTMLEditor.superclass.createToolbar.call(this,editor);  
        this.tb.insertButton(16,{cls:"x-btn-icon",  
            icon:"ext/resources/images/default/picture.png",handler:this.addImage,scope:this,tooltip : {
    title : '图片',
    text : '插入图片.',
    cls : 'x-html-editor-tip'
   }});      
        this.tb.insertButton(18,{cls:"x-btn-icon",  
            icon:"ext/resources/images/default/picture_add.png",handler:this.addCode,scope:this,tooltip : {
    title : '代码',
    text : '插入代码.',
    cls : 'x-html-editor-tip'
   }});  
                  
    },  
    validateValue : function(value){  
         if(value.length > this.maxLength){  
            var s=String.format(this.maxLengthText, this.maxLength);  
            this.markInvalid(s);  
            return false;  
        }  
         return true;  
    }  
});  
UploadImageWindow=Ext.extend(Ext.Window,{  
    title : '上传图片',       
    width : 345,              
    height : 210,     
    defaults : {              
        border : false 
    },  
    buttonAlign : 'center',   
    createFormPanel :function() {  
        return new Ext.form.FormPanel({           
            defaultType : 'textfield',  
            labelAlign : 'right',  
            fileUpload:true,  
            labelWidth : 75,              
            frame : true,  
            defaults : {              
                width : 220       
            },  
            items : [{                    
                    name : 'pathFile',  
                    fieldLabel : '选择图片',  
                    inputType : 'file' 
                    },  
                    {                     
                        name : 'title',  
                        fieldLabel : '说明' 
                    }
                    ,  
                    {                     
                        name : 'path',  
                        fieldLabel : 'URL'                
                    }
                    ,  
                    {  
                        name : 'width',  
                        fieldLabel : '宽度',  
                        value:'240'               
                    },  
                    {  
                        name : 'height',  
                        fieldLabel : '高度',  
                        value:'200'           
                    }  
                ]  
        });  
    },                    
    upload:function(fn) {  
            alert("1");
            this.fp.form.submit({  
                    waitTitle:"Ժ",  
                    waitMsg : '正在上传......',  
                    method:"POST",  
                    url : 'codeManage!uploadImage.action',//上传的action  
                    success : function(form, action) {  
                        this.fp.form.findField("path").setValue(action.result.path);  
                        var obj={title:this.fp.form.findField("title").getValue(),  
                           path:this.fp.form.findField("path").getValue(),  
                           width:this.fp.form.findField("width").getValue(),  
                           height:this.fp.form.findField("height").getValue()  
                           }                  
                        fn(obj);                          
                    },  
                    failure : function(form, action) {                        
                        if (action.failureType == Ext.form.Action.SERVER_INVALID)  
                            Ext.MessageBox.alert('', action.result.errors.msg);  
                        fn(false);                
                    },  
                    scope:this 
                });  
        },  
    initComponent : function(){  
        UploadImageWindow.superclass.initComponent.call(this);         
        this.fp=this.createFormPanel();  
        this.add(this.fp);  
     }    
 });   
//  
Ext.reg('myhtmleditor',HTMLEditor); 

////////////////////////////////////////////////////////////////////////////////////////////////////

 

调用方式：

{  
      xtype:"myhtmleditor",  
      name:"content",  
      value:"",  
      fieldLabel:"内容",  
      width:550,  
      height:400 
     }

 

////////////////////////////////////////////////////////////////////////////////////////////////////

 

this.tb.insertButton(16,{cls:"x-btn-icon",  
            icon:"ext/resources/images/default/picture.png",handler:this.addImage,scope:this,tooltip : {
    title : '图片',
    text : '插入图片.',
    cls : 'x-html-editor-tip'
   }});      

该处自定义修改图片位置

 

////////////////////////////////////////////////////////////////////////////////////////////////////

 

url action 类

 

评论

2 楼 yjshengshe 2010-12-03  

什么回显？图片不能显示了?那肯定是你后台的javabean没写好，上面贴的只是前台的。

1 楼 ganqingde 2010-11-30  

我试了，能上传，但不能回显，报错了