基于Ueditor的附件上传控件（支持IE8）

Uedior是一个很好的富文本编辑，其支持IE8的特性解决了很多开发的问题，然而，有的时候，我们可能只需要其中一部分的功能，这就需要我们做一定的改动。这次，我需要单独提取出其“上传附件”功能，先来看效果图：

一开始初始化的时候只有这样一个“上传附件”的按钮

点击按钮之后出现上传附件的框，这时候的操作和原来用正常的ueditor时候一样：

上传之后效果如下（点击删除，即可删除该文件）：

代码如下：

1. 页面初始化：

   	 <div class="uploadFileDiv"> 
   		<script id="upload_editor1" name="upload_editor" type="text/plain" style="width:30px;height:0;margin:5px 10px;float:left;"></script>
   		<input type="hidden" name="file_url_arr" class="file_url_arr" id="fileContent1" value=""/>
   		<div id="file_preview_arr" class="file_preview_arr" style="float:left;"></div>
   	</div>

   js代码：

   	<script type="text/javascript">
   	var upload_editor1 = null;
   	$(function(){
   		//编辑页面初始化ueditor多图上传按钮
   		upload_editor1 = UE.getEditor('upload_editor1', {
   			toolbars: [['attachment']]
   			,wordCount:false
   			,autoHeightEnabled:false
   		});
   		/* 此处为更换上传附件调用的后台方法，用自己的controller去替换
   		UE.Editor.prototype._bkGetActionUrl=UE.Editor.prototype.getActionUrl;
   		UE.Editor.prototype.getActionUrl=function(action){
   			if (action == 'uploadimage'){
   				return '上传文件用到的controller';
   			}else{
   				return this._bkGetActionUrl.call(this, action);
   			}
   		};
   		 */
   	});
   	</script>

   
   
2. ueditor.config.js:

           //是否启用元素路径，默认是显示
       	//将该属性该为fasle
           ,elementPathEnabled : false

   
   
3. ueditor.all.js:

   //规定插入附件执行之后的操作，替换原本的UE.plugin.register('insertfile', function (){
   //plugins/insertfile.js
   /**
    * 插入附件
    */
   UE.plugin.register('insertfile', function (){
   
       var me = this;
   
       return {
           commands:{
               'insertfile': {
                   execCommand: function (command, filelist){
                       filelist = utils.isArray(filelist) ? filelist : [filelist];
   
                       var i, item, title,
                       html = '',
                       newUrl = '';
   	                for (i = 0; i < filelist.length; i++) {
   	                    item = filelist[i];
   	                    title = item.title || item.url.substr(item.url.lastIndexOf('/') + 1);
   	                    html += '<div style="height:16px;float:left;margin:10px;">' +
   	                        '<a target="_blank" style="font-size:12px; color:#0066cc;" href="' + item.url +'" title="' + title + '">' + title + '</a>' +
   	                        '<input type="button" value="删除" οnclick="deleteFile(this,\'' + item.url + ',\')" /></div>' +
   	                        '</div>';
   	                    newUrl += item.url + ',';
   	                }
   	                var ueditor = $("#" + me.key);
   	                var parent = ueditor.closest('.uploadFileDiv');
   	                var file_preview_arr = parent.find('div.file_preview_arr');
   	                var file_url_arr = parent.find('input.file_url_arr');
   	                var content1 = file_preview_arr.html();
   	                var content2 = file_url_arr.val();
   	                file_preview_arr.html(content1+html);
   	                file_url_arr.val(content2+newUrl);
                   }
               }
           }
       }
   });

   （js方法里面尽量按class名进行操作，这样是为了可以在一个页面运用多个这样的上传插件，且互相之间不干扰）
4. 项目下载：项目（该项目，我是用MyEclipse做的）
5. 如果大家有什么疑惑，可以在下方留言，或者加博主qq：924325679（备注写清原因，一般我都回添加的），博主将尽力解答。