百度編輯器上傳視頻音頻的bug


前言:UEditor是由百度web前端研發部開發所見即所得富文本web編輯器,具有輕量,可定制,注重用戶體驗等特點,開源基於MIT協議,允許自由使用和修改代碼,百度Ueditor 支持多種后台語言上傳使用,php,java,net,nodejs官網沒有提供nodejs 的后台配置,如果使用koa 框架可以參考這個模塊:https://www.npmjs.com/package/ueditor-koa;上傳圖片,視頻,音頻等基本文件的功能。

百度Ueditor 下載地址:http://ueditor.baidu.com/website/download.html;

本文不介紹ueditor 的具體用法配置,

主要解決問題:視頻和音頻上傳顯示不正確的問題(前端問題,確保后台正確上傳配置)

 

第一個問題:上傳視頻不顯示

     首先我們來上傳一個視頻,如圖

  

   發現視頻是成功上傳了,說明后台已經成功返回數據了,

  點擊確認后,發現視頻並沒有成功插入編輯器中,發現顯示的是一張圖片,並不是視頻

  

   打開控制器,審查元素看,插入的元素標簽是img ,不是vidoe,

    

   到這一步,發現問題的所在了,接下來就是要解決問題了

   第一:找到 ueditor.config.js 這個文件,大概在365行這 個 whitList 屬性

  

    在whitlList 的屬性里面添加以下代碼 

 

1  source: ['src', 'type'],
2  embed: ['type', 'class', 'pluginspage', 'src', 'width', 'height', 'align', 'style', 'wmode', 'play', 'autoplay', 'loop', 'menu', 'allowscriptaccess', 'allowfullscreen', 'controls', 'preload'],
3  iframe: ['src', 'class', 'height', 'width', 'max-width', 'max-height', 'align', 'frameborder', 'allowfullscreen'] 

 

 

 

     如圖所示

     

    第二 、找到ueditor.all.js 這文件  ,搜索這個me.commands["insertvideo"] 方法,大概在17780行;找到

    

   改為: image 改為 video

  

  源碼:

1  for(var i=0,vi,len = videoObjs.length;i<len;i++){
2     vi = videoObjs[i];
3     cl = (type == 'upload' ? 'edui-upload-video video-js vjs-default-skin':'edui-faked-video');
4     html.push(creatInsertStr( vi.url, vi.width || 420,  vi.height || 280, id + i, null, cl, 'video'));
5 }

  完成到一步,我們重新上傳視頻,這回應該可以正常顯示視頻

  

    我們點擊html 查看源碼,似乎也正常,

  

  但是,再點擊顯示回來,發現視頻又變圖片了,但是圖片也不顯示(占位)

   

   發現bug,繼續修改

  第三:在ueditor.all.js 這文件找到 me.commands["insertvideo"] 方法,大概在17780行;找到:注悉以下代碼;如圖所示

  

  這樣基本解決視頻上傳的問題了。

  個人還有建議修改:

  在ueditor.all.js 這文件,找到UE.plugins['video'] 這個方法,大概在17632行。

  將  去掉:type="application/x-shockwave-flash" class=" + classname + "pluginspage="http://www.macromedia.com/go/getflashplayer"' 

   

  至此,視頻的問題ok

 

 

第二個問題:上傳本地音頻和上傳音頻不顯示

   主要修改支持本地上傳mp3 音頻問題

  非常簡單,本地上傳音頻也是 在上傳視頻面板那里上傳,所以只需判斷文件類型就可以了

  在 ueditor.all.js  這文件 找到 UE.plugins['video']  這個方法,大概在17632行。

   將原來的:

  

  改為:

  

  源碼:

 1  case 'video':
 2       var ext = url.substr(url.lastIndexOf('.') + 1);
 3       if (ext == 'ogv') ext = 'ogg';
 4       if (ext == "mp3") {
 5            str = '<audio' + (id ? ' id="' + id + '"' : '') + ' class=" audio-js" ' + (align ? ' style="float:' + align + '"' : '') +' controls preload="none" width="' + width + '" height="' + height + '" src="' + url + '">" /></audio>';
 6       } else {
 7              str = '<video' + (id ? ' id="' + id + '"' : '') + (align ? ' style="float:' + align + '"' : '') + 'controls width="' + width + '" height="' + height + '" src="' + url + '" data-setup="{}">' + '<source src="' + url + '" type="video/' + ext + '" /></video>';
 8      }
 9      break;

  到這里修改ok ,上傳一個mp3 文件:

  

 

   至此,音頻的本地上傳也解決了,

  但是發現,內置的在線音頻插入的音頻地址都是報錯的,不知道為什么了。有哪位大神能解決這問題,希望留言,跪謝

 

完結。。。。謝謝

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM