基于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(备注写清原因,一般我都回添加的),博主将尽力解答。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值