关于extjs3.x htmleditor扩展图片上传及各浏览器兼容

￡神魔★判官ぃ 2022-08-25 01:22 159阅读 0赞

HTMLEditor = Ext.extend(Ext.form.HtmlEditor, {
    	addImage : function() {
    		var editor = this;
    		var imgform = new Ext.FormPanel({
    			region : 'center',
    			labelWidth : 55,
    			bodyStyle : 'padding:20px 5px 0',
    			autoScroll : true,
    			border : false,
    			buttonAlign : 'center',
    			fileUpload : true,
    			items : [{
    			xtype : 'textfield',
    			fieldLabel : '选择文件',
    			name : 'attachMent.attachMent',
    			inputType : 'file',
    			allowBlank : false,
    			blankText : '文件不能为空',
    			height : 25,
    			anchor : '90%'
    			}],
    			buttons : [{
    			text : '插入',
    			type : 'submit',
    			handler : function() {
    				if (!imgform.form.isValid()) {
    					return;
    				}
    				var photo = imgform.form.items.items[0].getValue();
    				var fileext = photo.substring(photo.lastIndexOf("."),
    				photo.length).toLowerCase();
    				if (fileext != '.jpg' && fileext != '.gif'
    				&& fileext != '.jpeg' && fileext != '.png'
    				&& fileext != '.bmp') {
    					imgform.form.items.items[0].setValue('');
    					Ext.Msg.show({
    						title : '提示',
    						icon : 'ext-mb-error ',
    						width : 300,
    						msg : '对不起，系统仅支持标准格式的照片，请您调整格式后重新上传，谢谢 ！',
    						buttons : Ext.MessageBox.OK
    					});
    					return;
    				}
    				imgform.form.submit({
    					waitMsg : '图片正在插入..',
    					url : editor.url, // 点击插入执行的方法,将图片保存到服务器上
    					success : function(form, action) {
    					editor.win.focus();
    					var element = document.createElement("img");
    					// element.src = action.result.filename;
    					// if (Ext.isChrome) {
    					// }
    					element.src = action.result.filename.replaceAll(
    					'//', '/').replace('..', '');
    					if (Ext.isIE) {
    						editor.insertAtCursor(element.outerHTML);
    					} else {
    						var selection = editor.win.getSelection();
    						if (!selection.isCollapsed) {
    							selection.deleteFromDocument();
    						}
    						selection.getRangeAt(0).insertNode(element);
    					} // element <img src="\HtmlEditorPics\abc.jpg"/>
    					win.hide();
    					editor.updateToolbar();
    					editor.deferFocus();
    					},
    					failure : function(form, action) {
    						form.reset();
    						if (action.failureType == Ext.form.Action.SERVER_INVALID)
    						Ext.MessageBox.alert('警告',
    						action.result.errors.msg);
    					}
    				});
    				}
    			}, {
    				text : '取消',
    				type : 'submit',
    				handler : function() {
    					win.hide();
    				}
    			}]
    		});
    		var win = new Ext.Window({
    			title : "插入图片",
    			width : 400,
    			height : 150,
    			plain : true,
    			modal : true,
    			closeAction : 'hide',
    			border : false,
    			layout : "fit",
    			items : imgform
    		});
    		win.show(this);
    	},
    	createToolbar : function(editor) {
    		HTMLEditor.superclass.createToolbar.call(this, editor);
    		this.tb.insertButton(16, {
    		// cls : "x-btn-icon",
    		icon : "js/contract/image/vcard_edit.png",
    		handler : this.addImage,
    		scope : this
    		});
    	},
    	onEditorEvent : function() {
    		if (Ext.isIE) {
    		this.currentRange = this.getDoc().selection.createRange();
    		}
    		this.updateToolbar();
    	},
    	insertAtCursor : function(text) {
    		if (Ext.isIE) {
    			this.win.focus();
    			var r = this.currentRange || this.doc.selection.createRange();
    			if (r) {
    				r.collapse(true);
    				r.pasteHTML(text);
    				this.syncValue();
    				this.deferFocus();
    			}
    		} else if (Ext.isGecko || Ext.isOpera) {
    			this.win.focus();
    			this.execCmd('InsertHTML', text);
    			this.deferFocus();
    		} else if (Ext.isSafari) {
    			this.execCmd('InsertText', text);
    			this.deferFocus();
    		}
    	},
    	fixKeys : function(){ 
    			if(Ext.isIE){
    				return function(e){
    					var k = e.getKey(),
    						doc = this.getDoc(),
    							r;
    					if(k == e.TAB){
    						e.stopEvent();
    						r = doc.selection.createRange();
    						if(r){
    							r.collapse(true);
    							r.pasteHTML('    ');
    							this.deferFocus();
    						}
    					}else if(k == e.ENTER){
    						r = doc.selection.createRange();
    						if(r){
    							var target = r.parentElement();
    							if(!target || target.tagName.toLowerCase() != 'li'){
    								e.stopEvent();
    								r.pasteHTML('<br />');
    								r.collapse(false);
    								r.select();
    							}
    						}
    					}
    				};
    			}else if(Ext.isOpera){
    				return function(e){
    					var k = e.getKey();
    					if(k == e.TAB){
    						e.stopEvent();
    						this.win.focus();
    						this.execCmd('InsertHTML','    ');
    						this.deferFocus();
    					}
    				};
    			}else if(Ext.isWebKit){
    				return function(e){
    					var k = e.getKey();
    					if(k == e.TAB){
    						e.stopEvent();
    						this.execCmd('InsertText','\t');
    						this.deferFocus();
    					}else if(k == e.ENTER){
    						e.stopEvent();
    						this.execCmd('InsertHtml','<br />');
    						this.deferFocus();
    					}
    				 };
    			}
    		}()
    });
    Ext.reg('EditorEx', HTMLEditor);

修正了在谷歌浏览器中按回车 多打一行的bug 以及浏览器光标获取不准问题

用法

{
    	xtype : 'EditorEx',
    	id : 'process_specialTechnics',
    	name : 'processDto.specialTechnics',
    	fieldLabel : 'content',
    	width : 650,
    	height : 100,
    	maxLength : 999,
    	value : '',
    	url : 'erp/contract/uploadContractPic?EXT=1'
    }