Ext4.x之HtmlEditor擴充圖片上傳功能

標籤：style   blog   http   io   ar   color   os   sp   for   

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，在上面類中有定義，可以隨意改。

Ext4.x之HtmlEditor擴充圖片上傳功能