扩展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 : {??????????????
??????? 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) {??
??????????? alert("1");
??????????? this.fp.form.submit({??
??????????????????? waitTitle:"?",??
??????????????????? waitMsg : '正在上传......',??
??????????????????? method:"POST",??
??????????????????? url : 'codeManage!uploadImage.action',//上传的action??
??????????????????? success : function(form, action) {??
??????????????????????? this.fp.form.findField("path").setValue(action.result.path);??
??????????????????????? var obj={title:this.fp.form.findField("title").getValue(),??
?????????????????????????? path:this.fp.form.findField("path").getValue(),??
?????????????????????????? width:this.fp.form.findField("width").getValue(),??
?????????????????????????? height:this.fp.form.findField("height").getValue()??
?????????????????????????? }??????????????????
??????????????????????? fn(obj);??????????????????????????
??????????????????? },??
??????????????????? failure : function(form, action) {????????????????????????
??????????????????????? if (action.failureType == Ext.form.Action.SERVER_INVALID)??
??????????????????????????? Ext.MessageBox.alert('', action.result.errors.msg);??
??????????????????????? fn(false);????????????????
??????????????????? },??
??????????????????? scope:this?
??????????????? });??
??????? },??
??? initComponent : function(){??
??????? UploadImageWindow.superclass.initComponent.call(this);?????????
??????? this.fp=this.createFormPanel();??
??????? this.add(this.fp);??
???? }????
?});???
//??
Ext.reg('myhtmleditor',HTMLEditor);?
////////////////////////////////////////////////////////////////////////////////////////////////////
?
调用方式：
{??
????? xtype:"myhtmleditor",??
????? name:"content",??
????? value:"",??
????? fieldLabel:"内容",??
????? width:550,??
????? height:400?
???? }
?
////////////////////////////////////////////////////////////////////////////////////////////////////
?
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'
???}});??????
该处自定义修改图片位置
?
////////////////////////////////////////////////////////////////////////////////////////////////////
?
url action 类
?