Extjs4.2 Html编辑器扩展

Extjs4.2 Html编辑器扩展目的：扩展Extjs4.2的htmleditor，添加“上传图片”，”上传附件”等功能。

效果图：调用方法：{xtype : 'htmleditor',name : 'content',fieldLabel : '公告内容',height : 350,plugins : [Ext.create('Ext.zc.form.HtmlEditorImage'),Ext.create('Ext.zc.form.HtmlEditorAttachment') ]}具体实现：HtmlEditorImage.js/***@Description Html编辑器插入图片控件*@author张川(cr10210206@)*/Ext.define('Ext.zc.form.HtmlEditorImage', {extend: 'Ext.util.Observable',alias: 'widget.zc_form_HtmlEditorImage',langTitle : '插入图片',langIconCls : 'heditImgIcon',init : function(view) {var scope = this;view.on('render', function(){scope.onRender(view);});},/***添加"插入图片"按钮**/onRender : function(view) {var scope = this;view.getToolbar().add({iconCls : ngIconCls,tooltip : {title : ngTitle,width : 60},handler : function(){scope.showImgWindow(view);}});},/***显示"插入图片"窗体**/showImgWindow : function(view){ var scope = this;Ext.create('Ext.window.Window',{ width : 400,height : 280,title : ngTitle,layout : 'fit',autoShow : true,modal : true,resizable : false,maximizable : false,constrain : true,plain : true,enableTabScroll : true,bodyPadding : '1 1 1 1',border : false,items : [{xtype : 'tabpanel',enableTabScroll : true,bodyPadding : '1 1 1 1',items : [{title : '上传本地图片',items : [{xtype : 'form',layout : 'column',autoScroll : true,border : false,defaults : {columnWidth : 1,labelWidth : 60,labelAlign : 'right',padding: '5 5 5 5',allowBlank : false},items : [{xtype : 'fileuploadfield',fieldLabel : '选择文件',beforeLabelTextTpl : zc.getStar(),buttonText : '请选择...',name : 'upload',emptyText : '请选择图片',blankText : '图片不能为空',listeners : {change : function(view,value,eOpts){scope.uploadImgCheck(view,value);}}},{xtype: 'fieldcontainer',fieldLabel: '图片大小',layout: 'hbox',defaultType: 'numberfield',defaults: {flex: 1,labelWidth : 20,labelAlign : 'right',allowBlank : true},items: [{fieldLabel : '宽',name : 'width',minValue : 1},{fieldLabel : '高',name : 'height',minValue : 1}]},{xtype : 'textfield',fieldLabel : '图片说明',name : 'content',allowBlank : true,maxLength : 100,emptyText : '简短的图片说明'},{columnWidth : 1,xtype:'fieldset',title: '上传须知',layout: {type: 'table',columns: 1},collapsible: false,//是否可折叠defaultType : 'label',//默认的Form表单组件items : [{html: '1.上传图片不超过100KB'},{html : '2.为了保证图片能正常使用，我们支持以下格式的图片上传'},{html : '&nbsp;&nbsp;&nbsp;jpg,jpeg,png,gif'}]}],buttons : [{text : '保存',action : 'btn_save',iconCls : 'saveIcon',handler : function(btn){scope.saveUploadImg(btn,view);}},{text : '取消',iconCls : 'cancelIcon',handler : function(btn){btn.up('window').close();}}]},{title : '链接网络图片',items : [{xtype : 'form',layout : 'column',autoScroll : true,border : false,defaults : {columnWidth : 1,labelWidth : 60,labelAlign : 'right',padding: '5 5 5 5',allowBlank : false},items : [{xtype : 'textfield',fieldLabel : '图片地址',beforeLabelTextTpl : zc.getStar(),name : 'url',emptyText : '请填入支持外链的长期有效的图片URL',blankText : '图片地址不能为空',vtype : 'remoteUrl'},{xtype: 'fieldcontainer',fieldLabel: '图片大小',layout: 'hbox',defaultType: 'numberfield',defaults: {flex: 1,labelWidth : 20,labelAlign : 'right',allowBlank : true},items: [{fieldLabel : '宽',name : 'width',minValue : 1},{fieldLabel : '高',name : 'height',minValue : 1}]xtype : 'textfield',fieldLabel : '图片说明',name : 'content',allowBlank : true,maxLength : 100,emptyText : '简短的图片说明'}],buttons : [{text : '保存',action : 'btn_save',iconCls : 'saveIcon',handler : function(btn){scope.saveRemoteImg(btn,view);}},{text : '取消',iconCls : 'cancelIcon',handler : function(btn){btn.up('window').close();}}]}]}]}]});},/***上传图片验证**/uploadImgCheck : function(fileObj,fileName){var scope = this;//图片类型验证if(!(scope.getImgTypeCheck(scope.getImgHZ(fileName)))){ Ext.MessageBox.alert('温馨提示','上传图片类型有误');fileObj.reset();//清空上传内容return;}},/***获取图片后缀(小写)**/getImgHZ : function(imgName){//后缀var hz = '';//图片名称中最后一个.的位置var index = stIndexOf('.');if(index != -1){//后缀转成小写hz = imgName.substr(index+1).toLowerCase();}return hz;},/***图片类型验证**/getImgTypeCheck : function(hz){var typestr = 'jpg,jpeg,png,gif';var types = typestr.split(',');//图片类型for(var i = 0; i < types.length; i++){if(hz == types[i]){return true;}}return false;},/***上传图片**/saveUploadImg : function(btn,view){var scope = this;var windowObj = btn.up('window');//获取Window对象var formObj = btn.up('form');//获取Form对象if(formObj.isValid()){ //验证Form表单formObj.form.doAction('submit',{url : zc.bp() + '/bdata_Thtmleditor_getUploadImage.action',method : 'POST',submitEmptyText : false,waitMsg : '正在上传图片,请稍候...',timeout : 60000, // 60ssuccess : function(response, options){var result = options.result;if(!result.success){Ext.MessageBox.alert('温馨提示',result.msg);return;}scope.insertImg(view,result.data);windowObj.close();//关闭窗体},failure : function(response, options){Ext.MessageBox.alert('温馨提示',options.result.msg);}});}},/***保存远程的图片**/saveRemoteImg : function(btn,view){var scope = this;var windowObj = btn.up('window');//获取Window对象var formObj = btn.up('form');//获取Form对象if(formObj.isValid()){//验证Form表单var values = formObj.getValues();//获取Form表单的值scope.insertImg(view,values);windowObj.close();//关闭窗体}},/***插入图片**/insertImg : function(view,data){var url = data.url;var content = data.content;var width = data.width;var height = data.height;var str = '<img src="' + url + '" border="0" ';if(content != undefined && content != null && content != ''){ str += ' title="'+content+'" ';}if(width != undefined && width != null && width != 0){ str += ' width="'+width+'" ';}if(height != undefined && height != null && height != 0){ str += ' height="'+height+'" ';}str += ' />';view.insertAtCursor(str);}});HtmlEditorAttachment.js/***@Description Html编辑器插入附件控件*@author张川(cr10210206@)*/Ext.define('Ext.zc.form.HtmlEditorAttachment', { extend: 'Ext.util.Observable',alias: 'widget.zc_form_HtmlEditorAttachment', langTitle : '插入附件',langIconCls : 'attachmentIcon',init : function(view) {var scope = this;view.on('render', function(){scope.onRender(view);});},/***添加"插入附件"按钮**/onRender : function(view) {var scope = this;view.getToolbar().add({iconCls : ngIconCls,tooltip : {title : ngTitle,width : 60},handler : function(){scope.showAttachmentWindow(view);}});},/***显示"插入附件"窗体**/showAttachmentWindow : function(view){var scope = this;Ext.create('Ext.window.Window',{width : 400,height : 315,title : ngTitle,layout : 'fit',autoShow : true,modal : true,resizable : false,maximizable : false,constrain : true,plain : true,enableTabScroll : true,bodyPadding : '1 1 1 1',border : false,items : [{xtype : 'panel',bodyPadding : '1 1 1 1',items : [{xtype : 'form',layout : 'column',autoScroll : true,border : false,defaults : {columnWidth : 1,labelWidth : 60,labelAlign : 'right',padding: '5 5 5 5',allowBlank : false},items : [{xtype : 'fileuploadfield',fieldLabel : '选择文件',beforeLabelTextTpl : zc.getStar(),buttonText : '请选择...',name : 'upload',emptyText : '请选择文件',blankText : '文件不能为空',listeners : {change : function(view,value,eOpts){scope.uploadAttachmentCheck(view,value);}}},{xtype : 'textfield',fieldLabel : '附件名称',name : 'fileName',id : 'zc_form_HtmlEditorAttachment_form_fileName',maxLength : 50,emptyText : '请输入附件名称',blankText : '附件名称不能为空'},{xtype : 'textfield',fieldLabel : '附件说明',name : 'content',id : 'zc_form_HtmlEditorAttachment_form_content',allowBlank : true,maxLength : 100,emptyText : '简短的附件说明'},{columnWidth : 1,xtype:'fieldset',title: '上传须知',layout: {type: 'table',columns: 3},collapsible: false,//是否可折叠defaultType : 'label',//默认的Form表单组件items : [{html: '1.上传文档不超过100KB',colspan: 3},{html : '2.为了保证文档能正常使用，我们支持以下格式的文档上传',colspan: 3},{html : '&nbsp;&nbsp;&nbsp;',rowspan: 5},{html : 'MS Office文档：',colspan: 1,tdAttrs : {align : 'right'}},{html : 'doc,docx,ppt,pptx,xls,xlsx,vsd,pot,pps,rtf',colspan: 1},{html : 'WPS office系列：',colspan: 1,tdAttrs : {align : 'right'}},{html : 'wps,et,dps',colspan: 1},{html : 'PDF：',colspan: 1,tdAttrs : {align : 'right'}},{html : 'pdf',colspan: 1},{html : '纯文本：',colspan: 1,tdAttrs : {align : 'right'}},{html : 'txt',colspan: 1},{html : 'EPUB：',colspan: 1,tdAttrs : {align : 'right'}},{html : 'epub',colspan: 1}]}],buttons : [{text : '保存',action : 'btn_save',iconCls : 'saveIcon',handler : function(btn){scope.saveUploadAttachment(btn,view);}},{text : '取消',iconCls : 'cancelIcon',handler : function(btn){btn.up('window').close();}}]}]}]});},/***插入附件验证**/uploadAttachmentCheck : function(fileObj,fileName){var scope = this;var fileNameObj = Ext.getCmp('zc_form_HtmlEditorAttachment_form_fileName');var contentObj = Ext.getCmp('zc_form_HtmlEditorAttachment_form_content');//附件类型验证if(!(scope.getAttachmentTypeCheck(scope.getAttachmentHZ(fileName) ))){Ext.MessageBox.alert('温馨提示','上传附件类型有误');//清空插入内容fileObj.reset();fileNameObj.setValue('');contentObj.setValue('');return;}//设置默认的文件名称var defaultFileName = fileName.substr(0,stIndexOf('.'));fileNameObj.setValue(defaultFileName);contentObj.setValue(defaultFileName);},/***获取附件后缀(小写)**例如：txt**/getAttachmentHZ : function(AttachmentName){//后缀var hz = '';//附件名称中最后一个.的位置var index = stIndexOf('.');if(index != -1){//后缀转成小写hz = AttachmentName.substr(index+1).toLowerCase();}return hz;},/***附件类型验证**/getAttachmentTypeCheck : function(hz){var typestr = 'doc,docx,ppt,pptx,xls,xlsx,vsd,pot,pps,rtf,wps,et,dps,pdf,txt,epub' ;var types = typestr.split(',');//附件类型for(var i = 0; i < types.length; i++){if(hz == types[i]){return true;}}return false;},/***插入附件**/saveUploadAttachment : function(btn,view){var scope = this;var windowObj = btn.up('window');//获取Window对象var formObj = btn.up('form');//获取Form对象if(formObj.isValid()){ //验证Form表单formObj.form.doAction('submit',{url : zc.bp() + '/bdata_Thtmleditor_getUploadAttachment.action',method : 'POST',submitEmptyText : false,waitMsg : '正在上传附件,请稍候...',timeout : 60000, // 60ssuccess : function(response, options){var result = options.result;if(!result.success){Ext.MessageBox.alert('温馨提示',result.msg);return;}scope.insertAttachment(view,result.data);windowObj.close();//关闭窗体},failure : function(response, options){Ext.MessageBox.alert('温馨提示',options.result.msg);}});}},/***插入附件**/insertAttachment : function(view,data){var url = data.url;var fileName = data.fileName;var content = data.content;var str = '&nbsp;<a target="_blank" href="' + url + '" ';if(content != undefined && content != null && content != ''){ str += ' title="'+content+'" ';}str += ' >'+fileName+'</a>&nbsp;';view.insertAtCursor(str);}});。