Uedior是一个很好的富文本编辑,其支持IE8的特性解决了很多开发的问题,然而,有的时候,我们可能只需要其中一部分的功能,这就需要我们做一定的改动。这次,我需要单独提取出其“上传附件”功能,先来看效果图:
一开始初始化的时候只有这样一个“上传附件”的按钮
点击按钮之后出现上传附件的框,这时候的操作和原来用正常的ueditor时候一样:
上传之后效果如下(点击删除,即可删除该文件):
代码如下:
- 页面初始化:
js代码:<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>
<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>
- ueditor.config.js:
//是否启用元素路径,默认是显示 //将该属性该为fasle ,elementPathEnabled : false
- ueditor.all.js:
(js方法里面尽量按class名进行操作,这样是为了可以在一个页面运用多个这样的上传插件,且互相之间不干扰)//规定插入附件执行之后的操作,替换原本的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); } } } } });
- 项目下载:项目(该项目,我是用MyEclipse做的)
- 如果大家有什么疑惑,可以在下方留言,或者加博主qq:924325679(备注写清原因,一般我都回添加的),博主将尽力解答。