輕松建站 服務(wù)到位為客戶提供一體化網(wǎng)站設(shè)計(jì)服務(wù)
小程序開(kāi)發(fā)全功能小程序商城、開(kāi)發(fā)定制服務(wù)、全程售后服務(wù)、無(wú)憂備案
分享、交流、傳播知識(shí)分享、技術(shù)交流、經(jīng)驗(yàn)積累、提升能力
需要開(kāi)發(fā)個(gè)上傳視頻的功能，在后端使用，如果使用成熟框架應(yīng)該是比較簡(jiǎn)單的，如看別人用YII2框架開(kāi)發(fā)的功能載圖：
點(diǎn)擊添加視屏按鈕后出現(xiàn)上傳加目錄索引選擇，如下圖：
可是自己開(kāi)發(fā)的個(gè)老后臺(tái)框架UI，雖然比較老舊，但好在使用習(xí)慣了，所以按平時(shí)習(xí)慣就會(huì)用webuploader實(shí)現(xiàn)上傳，但這樣也不能很好的控制上傳的資源。
后來(lái)想了想，百度的Ueditor編輯器上的附件功能也是挺好用的，可否拿來(lái)改裝呢，然后查了百度比較多的相關(guān)資料，發(fā)覺(jué)用在自己框架上根本不通，也不知道是什么問(wèn)題，所以花了點(diǎn)時(shí)間，最終實(shí)現(xiàn)了，先看效果圖，添加視屏的界面，如下：
點(diǎn)擊上傳視頻后的ueditor附件界面,如下：
可以瀏覽服務(wù)器資源，如下：
選擇視頻后，返回添加視頻界面，如下：
視屏封面圖是用webuploader插件上傳不多說(shuō)了，主要是上傳視屏這是使用ueditor插件的附件上傳實(shí)現(xiàn)的，因?yàn)楸鞠到y(tǒng)不需要用到附件上傳的功能，所以直接把附件上傳的參數(shù)也改了，是使用PHP版的，找到ueditor/php/config.json這個(gè)文件，直接把參數(shù)改了，只留了MP4格式上傳，如下圖：
添加視頻界面關(guān)鍵代碼：
上傳視頻
接下來(lái)JS代碼：
var option = {
initialFrameHeight:100,
initialFrameWidth:660,
toolbars:[['attachment']],
autoHeightEnabled:false,//focus時(shí)自動(dòng)清空初始化時(shí)的內(nèi)容
autoClearinitialContent:true, //關(guān)閉字?jǐn)?shù)統(tǒng)計(jì)
wordCount:false,
theme:'default', //關(guān)閉elementPath
elementPathEnabled:false
}
//option參數(shù)有沒(méi)有都關(guān)系不大
var editor_main = new baidu.editor.ui.Editor(option);
editor_main.render("news_main");
editor_main.ready(function () {
//editor_main.setDisabled();//查網(wǎng)上的資料大多把這項(xiàng)開(kāi)啟，親測(cè)發(fā)現(xiàn)使用此項(xiàng)后是不能操作編輯器內(nèi)容的
editor_main.hide();//把編輯器隱藏起來(lái)
editor_main.addListener('contentChange', function() {
if(editor_main.getContent()!=""){
//編輯器內(nèi)容不能為空要添加，不然會(huì)出錯(cuò)，出錯(cuò)代碼在后面貼出
var pat=/
var temp=editor_main.getContent().match(pat)[0].split('href="');
var temp1=temp[1].split('"');
$("#news_vod_url").val(temp1[0]);
}
//JS正則亂搞一通，就取到了mp4的服務(wù)器地址,當(dāng)然也可以加上絕對(duì)地址的網(wǎng)址。
});
});
//以下是上傳按鈕事件
$('#file_btn_main').click(function(){
editor_main.setContent('', false);//先清空編輯器原來(lái)的內(nèi)容，這樣才能保證編輯器最新的附件內(nèi)容
var myFiles = editor_main.getDialog("attachment");
myFiles.open();
});
至此開(kāi)發(fā)完成，在開(kāi)發(fā)過(guò)程中遇到的幾處坑點(diǎn)
第一、調(diào)用editor_main.setContent('', false);這個(gè)就出錯(cuò)，查了網(wǎng)上很久資料，大部分說(shuō)是加個(gè)延時(shí)函數(shù)即可，然后跟蹤了一下信息，其實(shí)是編輯器空數(shù)據(jù)造成的，加了 if(editor_main.getContent()!=""){}這條件語(yǔ)句之后就沒(méi)有出錯(cuò)了。
第二、editor_main.setDisabled();這句設(shè)置絕對(duì)不能使用，使用后就無(wú)效了。
通過(guò)本次ueditor的附件改造功能后，大家可以舉一反三，如圖片的改造也基本可以使用本思路，不過(guò)ueditor的瀏覽目錄文件時(shí)會(huì)比較卡頓。
本篇技術(shù)文章僅供采用比較老舊框架用，如果新手可以去學(xué)個(gè)比較多人使用的框架，不要去糾結(jié)什么框架好的問(wèn)題，多人用的，能用起來(lái)的就是好的。
