333
This commit is contained in:
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
@@ -0,0 +1,59 @@
|
||||
@charset "utf-8";
|
||||
.edui-dialog-video .edui-video-wrapper{ width: 570px;_width:575px;margin: 10px auto; zoom:1;position: relative}
|
||||
.edui-dialog-video .edui-video-tabbody{height:335px;}
|
||||
.edui-dialog-video .edui-video-panel { position: absolute;width:100%; height:100%;background: #fff;}
|
||||
.edui-dialog-video .edui-video-panel table td{vertical-align: middle;}
|
||||
.edui-dialog-video #eduiVideoUrl {
|
||||
width: 470px;
|
||||
height: 21px;
|
||||
line-height: 21px;
|
||||
margin: 8px 5px;
|
||||
background: #FFF;
|
||||
border: 1px solid #d7d7d7;
|
||||
}
|
||||
.edui-dialog-video #eduiVideoSearchTxt{margin-left:15px;background: #FFF;width:200px;height:21px;line-height:21px;border: 1px solid #d7d7d7;}
|
||||
.edui-dialog-video #searchList{width: 570px;overflow: auto;zoom:1;height: 270px;}
|
||||
.edui-dialog-video #searchList div{float: left;width: 120px;height: 135px;margin: 5px 15px;}
|
||||
.edui-dialog-video #searchList img{margin: 2px 8px;cursor: pointer;border: 2px solid #fff} /*不用缩略图*/
|
||||
.edui-dialog-video #searchList p{margin-left: 10px;}
|
||||
.edui-dialog-video #eduiVideoType{
|
||||
width: 65px;
|
||||
height: 23px;
|
||||
line-height: 22px;
|
||||
border: 1px solid #d7d7d7;
|
||||
}
|
||||
.edui-dialog-video #eduiVideoSearchBtn,.edui-dialog-video #eduiVideoSearchReset{
|
||||
/*width: 80px;*/
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
background: #eee;
|
||||
border: 1px solid #d7d7d7;
|
||||
cursor: pointer;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.edui-dialog-video #eduiVideoPreview{width: 420px; margin-left: 10px; _margin-left:5px; height: 280px;background-color: #ddd;float: left}
|
||||
.edui-dialog-video #eduiVideoInfo {width: 120px;float: left;margin-left: 10px;_margin-left:7px;}
|
||||
.edui-dialog-video .edui-video-wrapper fieldset{
|
||||
border: 1px solid #ddd;
|
||||
padding-left: 5px;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 5px;
|
||||
width: 115px;
|
||||
}
|
||||
.edui-dialog-video .edui-video-wrapper fieldset legend{font-weight: bold;}
|
||||
.edui-dialog-video .edui-video-wrapper fieldset p{line-height: 30px;}
|
||||
.edui-dialog-video .edui-video-wrapper fieldset input.edui-video-txt{
|
||||
width: 65px;
|
||||
height: 21px;
|
||||
line-height: 21px;
|
||||
margin: 8px 5px;
|
||||
background: #FFF;
|
||||
border: 1px solid #d7d7d7;
|
||||
}
|
||||
.edui-dialog-video .edui-video-wrapper label.edui-video-url{font-weight: bold;margin-left: 5px;color: #06c;}
|
||||
.edui-dialog-video #eduiVideoFloat div{cursor:pointer;opacity: 0.5;filter: alpha(opacity = 50);margin:9px;_margin:5px;width:38px;height:36px;float:left;}
|
||||
.edui-dialog-video #eduiVideoFloat .edui-video-focus{opacity: 1;filter: alpha(opacity = 100)}
|
||||
.edui-dialog-video .edui-video-wrapper span.edui-video-view{display: inline-block;width: 30px;float: right;cursor: pointer;color: blue}
|
||||
@@ -0,0 +1,282 @@
|
||||
|
||||
(function(){
|
||||
var domUtils = UM.dom.domUtils;
|
||||
var widgetName = 'video';
|
||||
|
||||
UM.registerWidget( widgetName,{
|
||||
|
||||
tpl: "<link rel=\"stylesheet\" type=\"text/css\" href=\"<%=video_url%>video.css\" />" +
|
||||
"<div class=\"edui-video-wrapper\">" +
|
||||
"<div id=\"eduiVideoTab\">" +
|
||||
"<div id=\"eduiVideoTabHeads\" class=\"edui-video-tabhead\">" +
|
||||
"<span tabSrc=\"video\" class=\"edui-video-focus\"><%=lang_tab_insertV%></span>" +
|
||||
"</div>" +
|
||||
"<div id=\"eduiVideoTabBodys\" class=\"edui-video-tabbody\">" +
|
||||
"<div id=\"eduiVideoPanel\" class=\"edui-video-panel\">" +
|
||||
"<table><tr><td><label for=\"eduiVideoUrl\" class=\"edui-video-url\"><%=lang_video_url%></label></td><td><input id=\"eduiVideoUrl\" type=\"text\"></td></tr></table>" +
|
||||
"<div id=\"eduiVideoPreview\"></div>" +
|
||||
"<div id=\"eduiVideoInfo\">" +
|
||||
"<fieldset>" +
|
||||
"<legend><%=lang_video_size%></legend>" +
|
||||
"<table>" +
|
||||
"<tr><td><label for=\"eduiVideoWidth\"><%=lang_videoW%></label></td><td><input class=\"edui-video-txt\" id=\"eduiVideoWidth\" type=\"text\"/></td></tr>" +
|
||||
"<tr><td><label for=\"eduiVideoHeight\"><%=lang_videoH%></label></td><td><input class=\"edui-video-txt\" id=\"eduiVideoHeight\" type=\"text\"/></td></tr>" +
|
||||
"</table>" +
|
||||
"</fieldset>" +
|
||||
"<fieldset>" +
|
||||
"<legend><%=lang_alignment%></legend>" +
|
||||
"<div id=\"eduiVideoFloat\"></div>" +
|
||||
"</fieldset>" +
|
||||
"</div>" +
|
||||
"</div>" +
|
||||
"</div>" +
|
||||
"</div>" +
|
||||
"</div>",
|
||||
initContent:function( editor, $widget ){
|
||||
|
||||
var me = this,
|
||||
lang = editor.getLang( widgetName),
|
||||
video_url = UMEDITOR_CONFIG.UMEDITOR_HOME_URL + 'dialogs/video/';
|
||||
|
||||
me.lang = lang;
|
||||
me.editor = editor;
|
||||
me.$widget = $widget;
|
||||
me.root().html( $.parseTmpl( me.tpl, $.extend( { video_url: video_url }, lang['static'] ) ) );
|
||||
|
||||
me.initController( lang );
|
||||
|
||||
},
|
||||
initEvent:function(){
|
||||
|
||||
var me = this,
|
||||
url = $("#eduiVideoUrl", me.$widget)[0];
|
||||
|
||||
if( 'oninput' in url ) {
|
||||
url.oninput = function(){
|
||||
me.createPreviewVideo( this.value );
|
||||
};
|
||||
} else {
|
||||
url.onpropertychange = function () {
|
||||
me.createPreviewVideo( this.value );
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
initController: function( lang ){
|
||||
|
||||
var me = this,
|
||||
img = me.editor.selection.getRange().getClosedNode(),
|
||||
url;
|
||||
|
||||
me.createAlignButton( ["eduiVideoFloat"] );
|
||||
|
||||
//编辑视频时初始化相关信息
|
||||
if(img && img.className == "edui-faked-video"){
|
||||
$("#eduiVideoUrl", me.$widget)[0].value = url = img.getAttribute("_url");
|
||||
$("#eduiVideoWidth", me.$widget)[0].value = img.width;
|
||||
$("#eduiVideoHeight", me.$widget)[0].value = img.height;
|
||||
var align = domUtils.getComputedStyle(img,"float"),
|
||||
parentAlign = domUtils.getComputedStyle(img.parentNode,"text-align");
|
||||
me.updateAlignButton(parentAlign==="center"?"center":align);
|
||||
}
|
||||
me.createPreviewVideo(url);
|
||||
|
||||
},
|
||||
/**
|
||||
* 根据url生成视频预览
|
||||
*/
|
||||
createPreviewVideo: function(url){
|
||||
|
||||
if ( !url )return;
|
||||
|
||||
var me = this,
|
||||
lang = me.lang,
|
||||
conUrl = me.convert_url(url);
|
||||
|
||||
if(!me.endWith(conUrl,[".swf",".flv",".wmv"])){
|
||||
$("#eduiVideoPreview", me.$widget).html( lang.urlError );
|
||||
return;
|
||||
}
|
||||
$("#eduiVideoPreview", me.$widget)[0].innerHTML = '<embed type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"' +
|
||||
' src="' + url + '"' +
|
||||
' width="' + 420 + '"' +
|
||||
' height="' + 280 + '"' +
|
||||
' wmode="transparent" play="true" loop="false" menu="false" allowscriptaccess="never" allowfullscreen="true" ></embed>';
|
||||
|
||||
},
|
||||
/**
|
||||
* 将单个视频信息插入编辑器中
|
||||
*/
|
||||
insertSingle: function(){
|
||||
|
||||
var me = this,
|
||||
width = $("#eduiVideoWidth", me.$widget)[0],
|
||||
height = $("#eduiVideoHeight", me.$widget)[0],
|
||||
url=$('#eduiVideoUrl', me.$widget)[0].value,
|
||||
align = this.findFocus("eduiVideoFloat","name");
|
||||
|
||||
if(!url) return false;
|
||||
if ( !me.checkNum( [width, height] ) ) return false;
|
||||
this.editor.execCommand('insertvideo', {
|
||||
url: me.convert_url(url),
|
||||
width: width.value,
|
||||
height: height.value,
|
||||
align: align
|
||||
});
|
||||
|
||||
},
|
||||
/**
|
||||
* URL转换
|
||||
*/
|
||||
convert_url: function(url){
|
||||
if ( !url ) return '';
|
||||
var matches = url.match(/youtu.be\/(\w+)$/) ||
|
||||
url.match(/youtube\.com\/watch\?v=(\w+)/) ||
|
||||
url.match(/youtube.com\/v\/(\w+)/),
|
||||
youku = url.match(/youku\.com\/v_show\/id_(\w+)/),
|
||||
youkuPlay = /player\.youku\.com/ig.test(url);
|
||||
|
||||
if(youkuPlay){
|
||||
url = url.replace(/\?f=.*/, "");
|
||||
} else if (matches){
|
||||
url = "https://www.youtube.com/v/" + matches[1] + "?version=3&feature=player_embedded";
|
||||
}else if(youku){
|
||||
url = "http://player.youku.com/player.php/sid/"+youku[1]+"/v.swf"
|
||||
} else {
|
||||
url = url.replace(/http:\/\/www\.tudou\.com\/programs\/view\/([\w\-]+)\/?/i, "http://www.tudou.com/v/$1")
|
||||
.replace(/http:\/\/www\.youtube\.com\/watch\?v=([\w\-]+)/i, "http://www.youtube.com/v/$1")
|
||||
.replace(/http:\/\/v\.youku\.com\/v_show\/id_([\w\-=]+)\.html/i, "http://player.youku.com/player.php/sid/$1")
|
||||
.replace(/http:\/\/www\.56\.com\/u\d+\/v_([\w\-]+)\.html/i, "http://player.56.com/v_$1.swf")
|
||||
.replace(/http:\/\/www.56.com\/w\d+\/play_album\-aid\-\d+_vid\-([^.]+)\.html/i, "http://player.56.com/v_$1.swf")
|
||||
.replace(/http:\/\/v\.ku6\.com\/.+\/([^.]+)\.html/i, "http://player.ku6.com/refer/$1/v.swf")
|
||||
.replace(/\?f=.*/, "");
|
||||
}
|
||||
return url;
|
||||
},
|
||||
/**
|
||||
* 检测传入的所有input框中输入的长宽是否是正数
|
||||
*/
|
||||
checkNum: function checkNum( nodes ) {
|
||||
|
||||
var me = this;
|
||||
|
||||
for ( var i = 0, ci; ci = nodes[i++]; ) {
|
||||
var value = ci.value;
|
||||
if ( !me.isNumber( value ) && value) {
|
||||
alert( me.lang.numError );
|
||||
ci.value = "";
|
||||
ci.focus();
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
},
|
||||
/**
|
||||
* 数字判断
|
||||
* @param value
|
||||
*/
|
||||
isNumber: function( value ) {
|
||||
return /(0|^[1-9]\d*$)/.test( value );
|
||||
},
|
||||
updateAlignButton: function( align ) {
|
||||
var aligns = $( "#eduiVideoFloat", this.$widget )[0].children;
|
||||
|
||||
for ( var i = 0, ci; ci = aligns[i++]; ) {
|
||||
if ( ci.getAttribute( "name" ) == align ) {
|
||||
if ( ci.className !="edui-video-focus" ) {
|
||||
ci.className = "edui-video-focus";
|
||||
}
|
||||
} else {
|
||||
if ( ci.className =="edui-video-focus" ) {
|
||||
ci.className = "";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
/**
|
||||
* 创建图片浮动选择按钮
|
||||
* @param ids
|
||||
*/
|
||||
createAlignButton: function( ids ) {
|
||||
var lang = this.lang,
|
||||
vidoe_home = UMEDITOR_CONFIG.UMEDITOR_HOME_URL + 'dialogs/video/';
|
||||
|
||||
for ( var i = 0, ci; ci = ids[i++]; ) {
|
||||
var floatContainer = $( "#" + ci, this.$widget ) [0],
|
||||
nameMaps = {"none":lang['default'], "left":lang.floatLeft, "right":lang.floatRight};
|
||||
for ( var j in nameMaps ) {
|
||||
var div = document.createElement( "div" );
|
||||
div.setAttribute( "name", j );
|
||||
if ( j == "none" ) div.className="edui-video-focus";
|
||||
div.style.cssText = "background:url("+ vidoe_home +"images/" + j + "_focus.jpg);";
|
||||
div.setAttribute( "title", nameMaps[j] );
|
||||
floatContainer.appendChild( div );
|
||||
}
|
||||
this.switchSelect( ci );
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 选择切换
|
||||
*/
|
||||
switchSelect: function( selectParentId ) {
|
||||
var selects = $( "#" + selectParentId, this.$widget )[0].children;
|
||||
for ( var i = 0, ci; ci = selects[i++]; ) {
|
||||
$(ci).on("click", function () {
|
||||
for ( var j = 0, cj; cj = selects[j++]; ) {
|
||||
cj.className = "";
|
||||
cj.removeAttribute && cj.removeAttribute( "class" );
|
||||
}
|
||||
this.className = "edui-video-focus";
|
||||
} )
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 找到id下具有focus类的节点并返回该节点下的某个属性
|
||||
* @param id
|
||||
* @param returnProperty
|
||||
*/
|
||||
findFocus: function( id, returnProperty ) {
|
||||
var tabs = $( "#" + id , this.$widget)[0].children,
|
||||
property;
|
||||
for ( var i = 0, ci; ci = tabs[i++]; ) {
|
||||
if ( ci.className=="edui-video-focus" ) {
|
||||
property = ci.getAttribute( returnProperty );
|
||||
break;
|
||||
}
|
||||
}
|
||||
return property;
|
||||
},
|
||||
/**
|
||||
* 末尾字符检测
|
||||
*/
|
||||
endWith: function(str,endStrArr){
|
||||
for(var i=0,len = endStrArr.length;i<len;i++){
|
||||
var tmp = endStrArr[i];
|
||||
if(str.length - tmp.length<0) return false;
|
||||
|
||||
if(str.substring(str.length-tmp.length)==tmp){
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
},
|
||||
width:610,
|
||||
height:498,
|
||||
buttons: {
|
||||
ok: {
|
||||
exec: function( editor, $w ){
|
||||
$("#eduiVideoPreview", $w).html("");
|
||||
editor.getWidgetData(widgetName).insertSingle();
|
||||
}
|
||||
},
|
||||
cancel: {
|
||||
exec: function(){
|
||||
//清除视频
|
||||
$("#eduiVideoPreview").html("");
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
})();
|
||||
Reference in New Issue
Block a user