百度編輯器上傳視頻音頻的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 文件：

　　

 

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

　　可是發現，內置的在線音頻插入的音頻地址都是報錯的，不知道爲何了。有哪位大神能解決這問題，但願留言，跪謝

 

完結。。。。謝謝