发布：2023/12/7 15:36:47作者：大数据 来源：大数据 浏览次数：600
ueditor自定义图片上传、文件上传、视频上传个性化功能，从而实现ue视频上传以及单独上传功能，uedior监听视频上传
上传前提须知，因ue没有添加附件上传和视频上传事件，自定义时需要添加到文件当中，具体操作如下：
打开ueditor.all.js文件：
查找：me.execCommand('insertHtml', html);约在24804行左右，在其后添加：
|
1 |
me.fireEvent('afterUpfile', filelist); |
查找：me.execCommand("inserthtml", html.join(""), true);约在17771行左右，然后再其后面添加如下代码：
|
1 |
me.fireEvent('afterUpVideo', videoObjs); |
注：本文基于UEditor1.4.3.3版本。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 |
<!doctype html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>外部调用UEditor的多图上传和附件上传</title> <script type="text/javascript" charset="utf-8" src="ueditor.config.js"></script> <script type="text/javascript" charset="utf-8" src="ueditor.all.js"></script> <style> ul{display: inline-block;width: 100%;margin: 0;padding: 0;} li{list-style-type: none;margin: 5px;padding: 0;} </style> </head> <body> <h1>外部调用UEditor的多图上传和附件上传示例</h1> <button type="button" id="j_upload_img_btn">多图上传</button> <ul id="upload_img_wrap"></ul> <button type="button" id="j_upload_file_btn">附件上传</button> <ul id="upload_file_wrap"></ul> <button type="button" id="j_upload_video_btn">视频上传</button> <ul id="upload_video_wrap"></ul> <!-- 加载编辑器的容器 --> <textarea id="uploadEditor" style="display: none;"></textarea> <!-- 使用ue --> <script type="text/javascript"> // 实例化编辑器，这里注意配置项隐藏编辑器并禁用默认的基础功能。 var uploadEditor = UE.getEditor("uploadEditor", { isShow: false, focus: false, enableAutoSave: false, autoSyncData: false, autoFloatEnabled:false, wordCount: false, sourceEditor: null, scaleEnabled:true, toolbars: [["insertimage", "attachment","insertvideo"]] }); // 监听多图上传和上传附件组件的插入动作 uploadEditor.ready(function () { uploadEditor.addListener("beforeInsertImage", _beforeInsertImage); uploadEditor.addListener("afterUpfile",_afterUpfile); uploadEditor.addListener("afterUpVideo",_afterUpVideo); }); // 自定义按钮绑定触发多图上传和上传附件对话框事件 document.getElementById('j_upload_img_btn').onclick = function () { var dialog = uploadEditor.getDialog("insertimage"); dialog.title = '多图上传'; dialog.render(); dialog.open(); }; document.getElementById('j_upload_file_btn').onclick = function () { var dialog = uploadEditor.getDialog("attachment"); dialog.title = '附件上传'; dialog.render(); dialog.open(); }; // 多图上传动作 function _beforeInsertImage(t, result) { var imageHtml = ''; for(var i in result){ imageHtml += '<li><img src="'+result[i].src+'" alt="'+result[i].alt+'" height="150"></li>'; } document.getElementById('upload_img_wrap').innerHTML = imageHtml; } // 附件上传 function _afterUpfile(t, result) { var fileHtml = ''; for(var i in result){ fileHtml += '<li><a href="'+result[i].url+'" target="_blank">'+result[i].url+'</a></li>'; } document.getElementById('upload_file_wrap').innerHTML = fileHtml; } // 视频上传 function _afterUpVideo(t, result) { var fileHtml = ''; for(var i in result){ fileHtml += '<li><a href="'+result[i].url+'" target="_blank">'+result[i].url+'</a></li>'; } document.getElementById('upload_video_wrap').innerHTML = fileHtml; } </script> </body> </html> |
视频上传返回的json
[{"url":"/upload/video/20210126/6374728394670969233582178.mp4","width":420,"height":280,"align":"none"},{"url":"/upload/video/20210126/6374728394674628884378265.mp4","width":420,"height":280,"align":"none"}]
如果仍有问题或无法上传，请直接留言即可。本人亲测可用，尤其是ueditor视频自定义单独上传，资料不全，本人补全详实了。
