我们在做一些网站是会遇到，要有上传文件一类的事情。
我发现百度的富文本编辑器带上传功能，但是没有办法给后台传递我们要的参数。
先在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。
时间： 2024-08-24 06:42:42