百度編輯器插入音視訊bug修復
阿新 • • 發佈：2019-01-10
在config.js裡面whitList白名單加入以下程式碼
ul: ['class', 'style'],
video: ['autoplay', 'controls', 'loop', 'preload', 'src', 'height', 'width', 'class', 'style'],
source: ['src', 'type'],
embed: ['type', 'class', 'pluginspage', 'src', 'width', 'height', 'align', 'style', 'wmode' 在all.js
這段程式碼註釋
for(var i= 0,len=videoObjs.length;i<len;i++){
var img = this.document.getElementById('tmpVedio' 在這個裡面me.commands["insertvideo"]
修改這句最後image的為embed
html.push(creatInsertStr( vi.url, vi.width || 420, vi.height || 280 找到creatInsertStr這個方法
將case embed 裡面type="application/x-shockwave-flash" class="' + classname + '" pluginspage="http://www.macromedia.com/go/getflashplayer"' +' 這句去掉dialog下面的video資料夾下面的video.js
找到createPreviewVideo
將embed 裡面type="application/x-shockwave-flash" class="' + classname + '" pluginspage="http://www.macromedia.com/go/getflashplayer"' +' 這句去掉到這裡插入視訊就可以了。
接下來是插入音訊，需要重寫他們的方法，也可以自己寫個外掛，都一樣。重寫dialog下面的music
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>插入音樂</title>
<script type="text/javascript" src="../internal.js"></script>
<link rel="stylesheet" type="text/css" href="music.css">
</head>
<body>
<div class="wrapper">
<div id="video" class="panel focus">
<label for="musicUrl" class="url">音訊地址</label><input id="musicUrl" type="text">
<fieldset>
<legend>音訊尺寸</legend>
<div>
<label for="musicW" class="url">音訊寬度</label><input id="musicW" type="text">
<label for="musicH" class="url" style="margin-left: 20px;">音訊高度</label><input id="musicH" type="text">
</div>
</fieldset>
<fieldset>
<legend>對齊方式</legend>
<div class="divs">
<input type="radio" checked="" class="radio" name="userid" id = 'center' value="center"><label for="center">居中</label>
<input type="radio" class="radio" name="userid" id = 'lefts' value="left"><label for="lefts">左浮動</label>
<input type="radio" class="radio" name="userid" id = 'rights' value="right"><label for="rights">右浮動</label>
<input type="radio" class="radio" name="userid" id = 'nones' value="none"><label for="nones">無</label>
</div>
</fieldset>
<div id="tip">
</div>
</div>
</div>
<script type="text/javascript" src="music.js"></script>
<script type="text/javascript">
var music = new Music();
dialog.onok = function () {
var param = {};
//獲取選中的值
var radio = document.getElementsByClassName("radio");
for (i=0; i<radio.length; i++) {
if (radio[i].checked) {
param.align = radio[i].value;
}
}
param.musicUrl = document.getElementById('musicUrl').value;
param.musicW = document.getElementById('musicW').value;
param.musicH = document.getElementById('musicH').value;
return param.musicUrl == '' ? false :true
music.exec(param);
};
dialog.oncancel = function () {
//取消事件
};
</script>
</body>
</html>function Music() {
this.init();
}
(function () {
var pages = [],
panels = [],
selectedItem = null;
Music.prototype = {
total:70,
pageSize:10,
dataUrl:"http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.search.common",
playerUrl:"http://box.baidu.com/widget/flash/bdspacesong.swf",
init:function () {
var me = this;
me._addUrlChangeListener($G("musicUrl"));
},
callback:function (data) {
var me = this;
me.data = data.song_list;
setTimeout(function () {
$G('J_resultBar').innerHTML = me._renderTemplate(data.song_list);
}, 300);
},
dosearch:function () {
var me = this;
selectedItem = null;
var key = $G('J_searchName').value;
if (utils.trim(key) == "")return false;
key = encodeURIComponent(key);
me._sent(key);
},
doselect:function (i) {
var me = this;
if (typeof i == 'object') {
selectedItem = i;
} else if (typeof i == 'number') {
selectedItem = me.data[i];
}
},
onpageclick:function (id) {
var me = this;
for (var i = 0; i < pages.length; i++) {
$G(pages[i]).className = 'pageoff';
$G(panels[i]).className = 'paneloff';
}
$G('page' + id).className = 'pageon';
$G('panel' + id).className = 'panelon';
},
listenTest:function (elem) {
var me = this,
view = $G('J_preview'),
is_play_action = (elem.className == 'm-try'),
old_trying = me._getTryingElem();
if (old_trying) {
old_trying.className = 'm-try';
view.innerHTML = '';
}
if (is_play_action) {
elem.className = 'm-trying';
view.innerHTML = me._buildMusicHtml(me._getUrl(true));
}
},
_sent:function (param) {
var me = this;
$G('J_resultBar').innerHTML = '<div class="loading"></div>';
utils.loadFile(document, {
src:me.dataUrl + '&query=' + param + '&page_size=' + me.total + '&callback=music.callback&.r=' + Math.random(),
tag:"script",
type:"text/javascript",
defer:"defer"
});
},
_removeHtml:function (str) {
var reg = /<\s*\/?\s*[^>]*\s*>/gi;
return str.replace(reg, "");
},
_getUrl:function (isTryListen) {
//修改傳入的url為手動輸入的（去除原來的搜尋）
var me = this;
return me.playerUrl;
},
_getTryingElem:function () {
var s = $G('J_listPanel').getElementsByTagName('span');
for (var i = 0; i < s.length; i++) {
if (s[i].className == 'm-trying')
return s[i];
}
return null;
},
_buildMusicHtml:function (playerUrl) {
var html = '<embed class="BDE_try_Music" allowfullscreen="false" pluginspage="http://www.macromedia.com/go/getflashplayer"';
html += ' src="' + playerUrl + '"';
html += ' width="1" height="1" style="position:absolute;left:-2000px;"';
html += ' type="application/x-shockwave-flash" wmode="transparent" play="true" loop="false"';
html += ' menu="false" allowscriptaccess="never" scale="noborder">';
return html;
},
_byteLength:function (str) {
return str.replace(/[^\u0000-\u007f]/g, "\u0061\u0061").length;
},
_getMaxText:function (s) {
var me = this;
s = me._removeHtml(s);
if (me._byteLength(s) > 12)
return s.substring(0, 5) + '...';
if (!s) s = " ";
return s;
},
_rebuildData:function (data) {
var me = this,
newData = [],
d = me.pageSize,
itembox;
for (var i = 0; i < data.length; i++) {
if ((i + d) % d == 0) {
itembox = [];
newData.push(itembox)
}
itembox.push(data[i]);
}
return newData;
},
_renderTemplate:function (data) {
var me = this;
if (data.length == 0)return '<div class="empty">' + lang.emptyTxt + '</div>';
data = me._rebuildData(data);
var s = [], p = [], t = [];
s.push('<div id="J_listPanel" class="listPanel">');
p.push('<div class="page">');
for (var i = 0, tmpList; tmpList = data[i++];) {
panels.push('panel' + i);
pages.push('page' + i);
if (i == 1) {
s.push('<div id="panel' + i + '" class="panelon">');
if (data.length != 1) {
t.push('<div id="page' + i + '" onclick="music.onpageclick(' + i + ')" class="pageon">' + (i ) + '</div>');
}
} else {
s.push('<div id="panel' + i + '" class="paneloff">');
t.push('<div id="page' + i + '" onclick="music.onpageclick(' + i + ')" class="pageoff">' + (i ) + '</div>');
}
s.push('<div class="m-box">');
s.push('<div class="m-h"><span class="m-t">' + lang.chapter + '</span><span class="m-s">' + lang.singer
+ '</span><span class="m-z">' + lang.special + '</span><span class="m-try-t">' + lang.listenTest + '</span></div>');
for (var j = 0, tmpObj; tmpObj = tmpList[j++];) {
s.push('<label for="radio-' + i + '-' + j + '" class="m-m">');
s.push('<input type="radio" id="radio-' + i + '-' + j + '" name="musicId" class="m-l" onclick="music.doselect(' + (me.pageSize * (i-1) + (j-1)) + ')"/>');
s.push('<span class="m-t">' + me._getMaxText(tmpObj.title) + '</span>');
s.push('<span class="m-s">' + me._getMaxText(tmpObj.author) + '</span>');
s.push('<span class="m-z">' + me._getMaxText(tmpObj.album_title) + '</span>');
s.push('<span class="m-try" onclick="music.doselect(' + (me.pageSize * (i-1) + (j-1)) + ');music.listenTest(this)"></span>');
s.push('</label>');
}
s.push('</div>');
s.push('</div>');
}
t.reverse();
p.push(t.join(''));
s.push('</div>');
p.push('</div>');
return s.join('') + p.join('');
},
_addUrlChangeListener:function(url){
var me = this;
//監聽url變化
if (browser.ie) {
url.onpropertychange = function () {
me._regularUrl( this.value );
}
} else {
url.addEventListener( "input", function () {
me._regularUrl( this.value );
}, false );
}
},
_trim:function(str){
return str.replace(/(^\s*)|(\s*$)/g, "");
},
_regularUrl: function(audioUrl){
//驗證url是否為mp3格式 https格式
var sts = this._trim(audioUrl);
if(sts.slice(0,5) != 'https' || sts.substr(sts.length-3) != 'mp3'){
var tip = document.getElementById('tip');
tip.innerHTML = '只支援https開頭，mp3格式的檔案，任性！！'
return false
}
return true
},
exec:function (param) {
var me = this;
//驗證url是否正確
if(!this._regularUrl(param.musicUrl)){
return false
};
editor.execCommand('music', {
url:param.musicUrl,
width:param.musicW || 400,
height:param.musicH || 90,
align: param.align,
});
}
};
})();修改all.js
'music':{
execCommand:function (cmd, musicObj) {
var me = this,
str = creatInsertStr(musicObj.url, musicObj.width || 400, musicObj.height || 95, musicObj.align, "none", true);
me.execCommand("inserthtml",str);
},
queryCommandState:function () {
var me = this,
img = me.selection.getRange().getClosedNode(),
flag = img && (img.className == "edui-faked-music");
return flag ? 1 : 0;
}
}
music外掛的creatInsertStr函式
將embed更換為
<audio class="edui-faked-music" pluginspage="http://www.macromedia.com/go/getflashplayer"' +
' src="' + url + '" width="' + width + '" height="' + height + '" '+ (align && !cssfloat? 'align="' + align + '"' : '') +
(cssfloat ? 'style="float:' + cssfloat + '"' : '') +
'></audio>