我們在做一些網站是會遇到，要有上傳文件一類的事情。
我發現百度的富文本編輯器帶上傳功能，但是沒有辦法給后台傳遞我們要的參數。
先在ueditor.all.js中找到， me.execCommand('insertHtml', html);
在它下面添加： me.fireEvent('afterUpfile',filelist);
此時，我們就可以在前台監聽上傳了。
ps：filelist你聯系上文，我們可以知道就是我們要的文件信息數組，有后台返回的。
在前台添加，uploadEditor為編輯器對象實體。
1 uploadEditor.ready(function() { 2 uploadEditor.addListener("afterUpfile", _afterUpfile); 3 });
_afterUpfile，為監聽函數，就是我們自己的事物了。
如：
1 // 監聽函數 2 function _afterUpfile(t, result) { 3 var fileHtml = ''; 4 var str; 5 for (var i in result) { 6 NAME[i] = result[i].title; 7 URL[i] = result[i].url; 8 str = '文件名: ' + result[i].title + '<br/>'; 9 fileHtml += '<li>' + str + '</li>'; 10 } 11 document.getElementById('fileList').innerHTML = fileHtml; 12 }
下面是一個完整的測試頁面哦。
1 <!doctype html> 2 <html lang="zh-cn"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>外部調用UEditor的多圖上傳和附件上傳</title> 7 <script type="text/javascript" charset="utf-8" src="ueditor.config.js"></script> 8 <script type="text/javascript" charset="utf-8" src="ueditor.all.js"></script> 9 <style> 10 ul { 11 display: inline-block; 12 width: 100%; 13 margin: 0; 14 padding: 0; 15 } 16 17 li { 18 list-style-type: none; 19 margin: 5px; 20 padding: 0; 21 } 22 </style> 23 </head> 24 25 <body> 26 <h1>外部調用UEditor的多圖上傳和附件上傳示例</h1> 27 <button type="button" id="j_upload_file_btn">附件上傳</button> 28 <ul id="upload_file_wrap"></ul> 29 <!-- 加載編輯器的容器 --> 30 <textarea id="uploadEditor" style="display: none;"></textarea> 31 <!-- 使用ue --> 32 <script type="text/javascript"> 33 // 實例化編輯器，這里注意配置項隱藏編輯器並禁用默認的基礎功能。 34 var uploadEditor = UE.getEditor("uploadEditor", { 35 isShow: false, 36 focus: false, 37 enableAutoSave: false, 38 autoSyncData: false, 39 autoFloatEnabled: false, 40 wordCount: false, 41 sourceEditor: null, 42 scaleEnabled: true, 43 toolbars: [ 44 ["insertimage", "attachment"] 45 ] 46 }); 47 48 // 監聽多圖上傳和上傳附件組件的插入動作 49 uploadEditor.ready(function() { 50 uploadEditor.addListener("afterUpfile", function(t, result) { 51 alert(111); 52 var fileHtml = ''; 53 for (var i in result) { 54 fileHtml += '<li><a href="' + result[i].url + '" target="_blank">' + result[i].url + '</a></li>'; 55 } 56 document.getElementById('upload_file_wrap').innerHTML = fileHtml; 57 }); 58 }); 59 60 document.getElementById('j_upload_file_btn').onclick = function() { 61 var dialog = uploadEditor.getDialog("attachment"); 62 dialog.title = '附件上傳'; 63 dialog.render(); 64 dialog.open(); 65 }; 66 67 68 69 // 附件上傳 70 function _afterUpfile(t, result) { 71 var fileHtml = ''; 72 for (var i in result) { 73 fileHtml += '<li><a href="' + result[i].url + '" target="_blank">' + result[i].url + '</a></li>'; 74 } 75 document.getElementById('upload_file_wrap').innerHTML = fileHtml; 76 } 77 </script> 78 </body> 79 80 </html>
這是在網上找的，源地址以找不到了。
但是在這里要感謝這些分享他們代碼和心得的coders。