首页 > 代码库 > Ext4.x之HtmlEditor扩展图片上传功能
Ext4.x之HtmlEditor扩展图片上传功能
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=http://www.mamicode.com/‘"+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扩展图片上传功能
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。