概述:
百度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
<div id="tabHeads" class="tabhead">
...
<span tabSrc="upload" data-content-id="upload"><var id="lang_tab_uploadV"></var></span>
<span tabSrc="online" data-content-id="online"><var id="lang_tab_onlineV"></var></span> <!-- 添加'online'的标签 -->
...
</div>
<div id="tabBodys" class="tabbody">
...
<div id="upload" class="panel">
...
</div>
<div id="online" class="panel"> <!-- 添加'online'标签的容器 -->
<div id="videoList"><var id="lang_imgLoading"></var></div>
</div>
</div>
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; } };
说明:当然,如果上传的视频是一个视频服务器,也就没必要此功能。
转载于:https://blog.51cto.com/lang8027/2045534