日期:2014-05-17  浏览次数:20657 次

扩展一下FCK HtmlEditor 增加图片上传、代码插入功能

       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