日期:2014-05-17 浏览次数:20657 次
Ext自己带了一个HtmlEditor,具备基本的编辑功能,而且使用起来非常方便,在web应用起来感觉还不错,但是他缺少了上传功能,这样使得编辑文字的时候不能图文并茂,写一个小工程个人认为不需要集成FCK或者其他的编辑器,使用这个足矣,所以在闲暇之余给HtmlEditor写了一个扩展代码,使得htmlEditor具备图片上传功能,并及时给图片插入到文字中间,代码如下:
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:"resources/resources/images/default/dd/img.png",handler:this.addImage,scope:this}); this.tb.insertButton(18,{cls:"x-btn-icon", icon:"resources/resources/images/default/dd/code.png",handler:this.addCode,scope:this}); }, 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) { this.fp.form.submit({ waitTitle:"?", waitMsg : '正在上传......', method:"POST", url : 'xxxx',//上传的action success : function(form, action) { this.fp.form.findField("path").setValue("/upload/"+action.result.data.path); var obj={title:this.fp.form.findField("title").getV