效果图如下:
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>
4.修改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('video'),//添加video标签 可显示视频预览图 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');
ic.setAttribute("src", list[i].url);
ic.setAttribute("width", "113");
ic.setAttribute("height", "113");
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;
}
};
5.修改文件 /ueditor/lang/zh-cn/zh-cn.js
找到 insertvideo --> static 节点 在下面添加 : 'lang_tab_onlineV':"在线管理视频",
'insertvideo':{
'static':{
'lang_tab_insertV':"插入视频",
'lang_tab_searchV':"搜索视频",
'lang_tab_uploadV':"上传视频",
'lang_tab_onlineV':"在线管理视频",
6.在项目的src目录下建个文件夹 把这些文件夹放入你的文件夹 ,把ueditor 的jar包 从你的项目中删除 不需要引用 ueditor-1.1.2.jar
这些类放入项目中,导入的类都是项目中的类文件路径
7.修改/ueditor/jsp/controller.jsp 导入的类文件是项目中的类文件路径
8.需要改动的类:
1.ActionMap.java 定义常量
2. ActionEnter.java类中的invoke()方法在switch代码段中添加代码:
case ActionMap.LIST_VIDEO:
conf = configManager.getConfig( actionCode );
int start2 = this.getStartIndex();
state = (State) new FileManager( conf ).listFile( start2 );
break;
3.ConfigManager.java类中 getConfig()方法在switch代码段中添加代码:
case ActionMap.LIST_VIDEO:
conf.put( "allowFiles", this.getArray( "videoManagerAllowFiles" ) );
conf.put( "dir", this.jsonConfig.getString( "videoManagerListPath" ) );
conf.put( "count", this.jsonConfig.getInt( "videoManagerListSize" ) );
break;