Ext4.x之HtmlEditor扩展图片上传功能

1.实现非常简单，稍后跟上，废话不说先上图。

2.类的定义：

Ext.define(‘Ext.ux.XHtmlEditor‘,{
        extend:‘Ext.form.field.HtmlEditor‘,
        alias:‘widget.xhtmleditor‘,
        //扩展的属性
        uploadConfig:{
            url:‘‘//后台上传地址
        },
        initComponent : function(){
            this.callParent(arguments);
            var me = this;
            //创建组件
            me.initExtFun = function(){
                Ext.create(‘Ext.window.Window‘,{
                    title:‘插入图片‘,
                    resizable:false,
                    border:false,
                    modal:true,
                    frame:false,
                    iconCls:‘Picture-Sunset‘,
                    items:[
                        {
                            xtype:‘form‘,
                            width:320,
                            height:70,
                            padding:10,
                            border:false,
                            items:[
                                {
                                    width:280,
                                    labelAlign:‘right‘,
                                    labelWidth:60,
                                    xtype:‘filefield‘,
                                    name:‘file‘,
                                    allowBlank:false,
                                    fieldLabel:‘选择图片‘,
                                    buttonText:‘浏览...‘
                                }
                            ]
                        }
                    ],
                    buttons:[
                        {
                            text:‘上传‘,
                            handler:function(b,e){
                                //实现上传,完成之后插入带编辑器
                                var form = b.up(‘window‘).down(‘form‘);
                                form.submit({
                                    waitMsg:‘正在上传...‘,
                                    clientValidation: true,
                                    url:me.uploadConfig.url,
                                    success:function(form,action){
                                        //返回图片路径
                                        var path = action.result.message;
                                        //将图片插入到光标所在的位置
                                        me.insertAtCursor("<img src=‘"+path+"‘ />");
                                        b.up(‘window‘).close();
                                    },
                                    failure:function(form,action){
                                            switch (action.failureType) {
                                                case Ext.form.action.Action.CLIENT_INVALID:
                                                    Ext.Msg.alert(‘提示‘,‘客户端验证不通过!‘);
                                                    break;
                                                default:
                                                    Ext.Msg.alert(‘保存失败,‘,action.result.message);
                                            }
                                        }
                                    });
                            }
                        },
                        {
                            text:‘取消‘,
                            handler:function(b,e){
                                b.up(‘window‘).close();
                            }
                        }
                    ]
                }).show();
            }
            var b = Ext.create(‘Ext.button.Button‘,{
                xtype:‘button‘,
                iconCls:‘Picture-Sunset‘,
                tooltip:‘上传图片‘,
                text:‘‘,
                listeners:{
                    click:function(b,e){
                         me.initExtFun();
                    }
                }
            });
            me.getToolbar().add(b);
        }
    });
    

3.用法很简单，首加载在上面的类,然后这样引用。xtype:‘xhtmleditor‘

　　　　　　　　　　{
                        xtype:‘xhtmleditor‘,
                        uploadConfig:{
                            url:‘/app/uploadImage‘
                        }
                 }

4.后台实现上传就省了，方法贼多。但要注意的是后台默认接收图片的name是file，在上面类中有定义，可以随意改。