概述:
百度Ueditor如果config.json中配置的文件管理中的'file'与'video'不是一个目录,那么就不能浏览已上传过的视频;根据文件管理的相关代码添加了浏览在线视频的功能。
1.修改config.json, 添加视频相关参数
"videoManagerActionName": "listvideo", "videoManagerListPath": "static/upload/video/", "videoManagerUrlPrefix": "http://127.0.0.1:5000/", "videoManagerListSize": 20, "videoManagerAllowFiles": [ ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg", ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid" ]
2. 修改dialogs/video/video.css
#online { width: 100%; height: 336px; padding: 10px 0 0 0; } #online #videoList{ width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; position: relative; } #online ul { display: block; list-style: none; margin: 0; padding: 0; } #online li { float: left; display: block; list-style: none; padding: 0; width: 113px; height: 113px; margin: 0 0 9px 9px; *margin: 0 0 6px 6px; background-color: #eee; overflow: hidden; cursor: pointer; position: relative; } #online li.clearFloat { float: none; clear: both; display: block; width:0; height:0; margin: 0; padding: 0; } #online li img { cursor: pointer; } #online li div.file-wrapper { cursor: pointer; position: absolute; display: block; width: 111px; height: 111px; border: 1px solid #eee; background: url("./images/bg.png") repeat; } #online li div span.file-title{ display: block; padding: 0 3px; margin: 3px 0 0 0; font-size: 12px; height: 13px; color: #555555; text-align: center; width: 107px; white-space: nowrap; word-break: break-all; overflow: hidden; text-overflow: ellipsis; } #online li .icon { cursor: pointer; width: 113px; height: 113px; position: absolute; top: 0; left: 0; z-index: 2; border: 0; background-repeat: no-repeat; } #online li .icon:hover { width: 107px; height: 107px; border: 3px solid #1094fa; } #online li.selected .icon { background-image: url(images/success.png); background-image: url(images/success.gif) \9; background-position: 75px 75px; } #online li.selected .icon:hover { width: 107px; height: 107px; border: 3px solid #1094fa; background-position: 72px 72px; } #online .pagination { margin-bottom: 10px; margin-right: 10px; display: inline-block; float: right; } #online .pagebtn { display: inline; border-radius: 4px; padding: 2px; cursor: default; text-align: center; color: #495060; background: url("../image/images/bg.png") no-repeat 0 -30px; }
3. 修改dialogs/video/video.html
... .........
5. 修改dialogs/video/video.js
var video = {}, ... uploadFile, onlineFile; window.onload = function(){ ... initOnline(); ... } function addOkListener(){ ... case "online": return insertOnline(); break; } ... /* 在线视频 */ function insertOnline(){ var videoObjs = []; var list = onlineFile.getInsertList(); list.forEach(value => { videoObjs.push({ url: convert_url(value.url), width: 420, height: 280, align: "none" }) }); editor.execCommand('insertvideo',videoObjs, 'upload'); } function initOnline(){ onlineFile = new OnlineFile('videoList'); } function OnlineFile(target) { this.container = utils.isString(target) ? document.getElementById(target) : target; this.init(); } OnlineFile.prototype = { init: function () { this.initContainer(); this.initEvents(); this.initData(); }, /* 初始化容器 */ initContainer: function () { this.container.innerHTML = ''; this.list = document.createElement('ul'); this.clearFloat = document.createElement('li'); domUtils.addClass(this.list, 'list'); domUtils.addClass(this.clearFloat, 'clearFloat'); this.list.appendChild(this.clearFloat); this.container.appendChild(this.list); }, /* 初始化滚动事件,滚动到地步自动拉取数据 */ initEvents: function () { var _this = this; /* 滚动拉取图片 */ domUtils.on($G('videoList'), 'scroll', function(e){ var panel = this; if (panel.scrollHeight - (panel.offsetHeight + panel.scrollTop) < 10) { _this.getFileData(); } }); /* 选中图片 */ domUtils.on(this.list, 'click', function (e) { var target = e.target || e.srcElement, li = target.parentNode; if (li.tagName.toLowerCase() == 'li') { if (domUtils.hasClass(li, 'selected')) { domUtils.removeClasses(li, 'selected'); } else { domUtils.addClass(li, 'selected'); } } }); }, /* 初始化第一次的数据 */ initData: function () { /* 拉取数据需要使用的值 */ this.state = 0; this.listSize = editor.getOpt('videoManagerListSize'); this.listIndex = 0; this.listEnd = false; /* 第一次拉取数据 */ this.getFileData(); }, /* 向后台拉取视频列表数据 */ getFileData: function () { var _this = this; if(!_this.listEnd && !this.isLoadingData) { this.isLoadingData = true; ajax.request(editor.getActionUrl(editor.getOpt('videoManagerActionName')), { timeout: 100000, data: utils.extend({ start: this.listIndex, size: this.listSize }, editor.queryCommandValue('serverparam')), method: 'get', onsuccess: function (r) { try { var json = eval('(' + r.responseText + ')'); if (json.state == 'SUCCESS') { _this.pushData(json.list); _this.listIndex = parseInt(json.start) + parseInt(json.list.length); if(_this.listIndex >= json.total) { _this.listEnd = true; } _this.isLoadingData = false; } } catch (e) { if(r.responseText.indexOf('ue_separate_ue') != -1) { var list = r.responseText.split(r.responseText); _this.pushData(list); _this.listIndex = parseInt(list.length); _this.listEnd = true; _this.isLoadingData = false; } } }, onerror: function () { _this.isLoadingData = false; } }); } }, /* 添加视频到列表界面上 */ pushData: function (list) { var i, item, img, filetype, preview, icon, _this = this, urlPrefix = editor.getOpt('videoManagerUrlPrefix'); for (i = 0; i < list.length; i++) { if(list[i] && list[i].url) { item = document.createElement('li'); icon = document.createElement('span'); filetype = list[i].url.substr(list[i].url.lastIndexOf('.') + 1); if ( "png|jpg|jpeg|gif|bmp".indexOf(filetype) != -1 ) { preview = document.createElement('img'); domUtils.on(preview, 'load', (function(image){ return function(){ _this.scale(image, image.parentNode.offsetWidth, image.parentNode.offsetHeight); }; })(preview)); preview.width = 113; preview.setAttribute('src', urlPrefix + list[i].url + (list[i].url.indexOf('?') == -1 ? '?noCache=':'&noCache=') + (+new Date()).toString(36) ); } else { var ic = document.createElement('i'), textSpan = document.createElement('span'); textSpan.innerHTML = list[i].url.substr(list[i].url.lastIndexOf('/') + 1); preview = document.createElement('div'); preview.appendChild(ic); preview.appendChild(textSpan); domUtils.addClass(preview, 'file-wrapper'); domUtils.addClass(textSpan, 'file-title'); domUtils.addClass(ic, 'file-type-' + filetype); domUtils.addClass(ic, 'file-preview'); } domUtils.addClass(icon, 'icon'); item.setAttribute('data-url', urlPrefix + list[i].url); if (list[i].original) { item.setAttribute('data-title', list[i].original); } item.appendChild(preview); item.appendChild(icon); this.list.insertBefore(item, this.clearFloat); } } }, /* 改变图片大小 */ scale: function (img, w, h, type) { var ow = img.width, oh = img.height; if (type == 'justify') { if (ow >= oh) { img.width = w; img.height = h * oh / ow; img.style.marginLeft = '-' + parseInt((img.width - w) / 2) + 'px'; } else { img.width = w * ow / oh; img.height = h; img.style.marginTop = '-' + parseInt((img.height - h) / 2) + 'px'; } } else { if (ow >= oh) { img.width = w * ow / oh; img.height = h; img.style.marginLeft = '-' + parseInt((img.width - w) / 2) + 'px'; } else { img.width = w; img.height = h * oh / ow; img.style.marginTop = '-' + parseInt((img.height - h) / 2) + 'px'; } } }, getInsertList: function () { var i, lis = this.list.children, list = []; for (i = 0; i < lis.length; i++) { if (domUtils.hasClass(lis[i], 'selected')) { var url = lis[i].getAttribute('data-url'); var title = lis[i].getAttribute('data-title') || url.substr(url.lastIndexOf('/') + 1); list.push({ title: title, url: url }); } } return list; } };
说明:当然,如果上传的视频是一个视频服务器,也就没必要此功能。