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