日期:2014-05-17  浏览次数:20619 次

可上传图片的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 : {????????