扩展extjs的htmleditor实现本地下传 _HTML/CSS

扩展extjs的htmleditor实现本地上传

主要思路：

这里主要针对本地图片上传，其他文件上传同理，只是config配置信息中permitted_extensions限制的上传类型不同罢了

1. 在Ext.ux.plugins中注册自定义组件Upload，在组件init时，往htmleditor工具栏添加一个图片上传的菜单，然后再菜单上绑定mousedown事件处理方法imageInsert()，该方法内部实际是调用了Ext.ux.UploadDialog.Dialog，把config信息配置到Ext.ux.UploadDialog.Dialog中，以实现图片上传功能

2. 在引用时，在htmleditor的plugins中配置自定义组件Upload并配置config信息即可

customer.js

Ext.namespace('Ext.ux','Ext.ux.plugins'); 
Ext.ux.plugins.Upload=function(config){
	config=config||{};  
	  
    Ext.apply(this,config);  
  
    this.init=function(htmlEditor) {  
        this.editor=htmlEditor;  
        this.editor.on('render',onRender,this);  
    };  
    
    this.imageInsert=function() {
    	var dialog = new Ext.ux.UploadDialog.Dialog({  
		    title:config.title || '图片上传',  
		    url: config.url || '',  
		    post_var_name: config.post_var_name || '',
		    reset_on_hide: config.reset_on_hide || false,  
		    modal: config.modal || true,
		    permitted_extensions: config.permitted_extensions || ['JPG','jpg','JPEG','jpeg','GIF','gif','PNG','png'],  
		    allow_close_on_upload: config.allow_close_on_upload || false,  
		    upload_autostart: config.upload_autostart || true //是否自动上传
		  }); 
		dialog.show();
		//上传成功后回调函数
		dialog.on('uploadsuccess',function(dialog, filename, resp_data, record){
			config.uploadCallback || ''
		});
    }
    
    function onRender(){  
        if( ! Ext.isSafari){  
            this.editor.tb.add({  
                itemId : 'htmlEditorImage',  
                cls : 'x-btn-icon x-edit-insertimage',  
                enableToggle : false,  
                scope : this,  
                handler : function(){  
                    this.imageInsert();  
                },  
                clickEvent : 'mousedown',  
                tooltip : config.buttonTip ||   
                {  
                    title : '插入图片',  
                    text : '插入图片到编辑器',  
                    cls : 'x-html-editor-tip'  
                },  
                tabIndex :- 1  
            });  
        }  
    }  
	
}

页面

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="extjs2.3/resources/css/ext-all.css" />
		<script type="text/javascript" src="extjs2.3/adapter/ext/ext-base.js"></script>
		<script type="text/javascript" src="extjs2.3/ext-all.js"></script>
		
		<script type="text/javascript" src="extjs2.3/ux/upload/js/Ext.ux.UploadDialog.js" ></script>  
		<script type="text/javascript" src="extjs2.3/ux/upload/js/Ext.ux.UploadDialog.packed.js"></script>
    	<link rel="stylesheet" type="text/css" href="extjs2.3/ux/upload/css/Ext.ux.UploadDialog.css"/>   
		<script type="text/javascript" src="customer.js" ></script>
		
			
		<script type="text/javascript">

			Ext.onReady(function(){
				
				Ext.QuickTips.init();  
				  
			    new Ext.FormPanel({  
			        renderTo: 'form',  
			        defaultType: 'textfield',  
			        items: [{  
			            xtype:'htmleditor',  
			                width: 650,  
			                height: 350,  
			                plugins: new Ext.ux.plugins.Upload({  
			                	    title:'本地图片上传',  
			        		    url: 'shop/link/link_edit!uploadImage.action',  
			        		    post_var_name:'imageUpload',
			        		    reset_on_hide: false,  
			        		    modal: true,
			        		    permitted_extensions:['JPG','jpg','JPEG','jpeg','GIF','gif','PNG','png'],  
			        		    allow_close_on_upload: true,  
			        		    upload_autostart: true //是否自动上传
			                })  
			            }  
			        ]  
			    });  
			});
			
		</script>
	
	</head>

	<body>
		<div id="form"></div>
	</body>
</html>