ext4.x HTMLEditor Extended image upload function

1. Implementation is very simple, follow up later, nonsense not to say first.

2. Definition of class:

Ext.define (' Ext.ux.XHtmlEditor ', {extend:' Ext.form.field.HtmlEditor ', alias:' Widget.xhtmleditor ',        //Extended Propertiesuploadconfig:{URL:‘‘//Background upload address}, InitComponent:function(){             This. Callparent (arguments); varme = This; //Creating ComponentsMe.initextfun =function() {ext.create (' Ext.window.Window ', {title:' Insert Picture ', 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:' Select Picture ', ButtonText:' Browse ... '                                }                            ]                        }                    ], buttons:[{text:Upload, Handler:function(b,e) {//implement upload, insert with editor after completion                                varform = b.up (' window '). Down (' form '); Form.submit ({waitmsg:' Uploading ... ', Clientvalidation:true, Url:me.uploadConfig.url, success:function(form,action) {//return picture Path                                        varPath =Action.result.message; //Insert a picture where the cursor is locatedMe.insertatcursor ("); B.up (' Window '). Close (); }, Failure:function(form,action) {Switch(action.failuretype) { CaseExt.form.action.Action.CLIENT_INVALID:Ext.Msg.alert (' Prompt ', ' Client authentication does not pass! ');  Break; default: Ext.Msg.alert (' Save failed, ', Action.result.message);                            }                                        }                                        }); }}, {text:Cancel, Handler:function(b,e) {b.up (' Window '). Close ();            }]}). Show (); }            varb = ext.create (' Ext.button.Button ', {xtype:' Button ', Iconcls:' Picture-sunset ', tooltip:' Upload image ', Text:‘‘, listeners:{click:function(b,e) {me.initextfun ();            }                }            });        Me.gettoolbar (). Add (b);    }    }); 

3. Usage is simple, first loaded in the class above, and then referenced like this. Xtype: ' Xhtmleditor '

{                        xtype:' xhtmleditor ',                        uploadconfig:{                            URL:'/app/uploadimage '}                 } 

4. Backstage implementation upload will be saved, method thieves more. But note that the background is the default to receive the image name is file, in the above class has a definition, you can change.

ext4.x HTMLEditor Extended image upload function