2. 程式人生 > >百度UEditor編輯器視訊相關bug彙總和穩定解決方案

百度UEditor編輯器視訊相關bug彙總和穩定解決方案

阿新 • • 發佈：2019-01-04

百度UEditor編輯器的視訊是個很頭疼的問題，從昨晚到今天折騰了一天，也看了不少帖子，很多都是隻治標不治本，而且有很多改法也是忽略本質，不過受大神啟發，自己還是琢磨出來了。

百度UEditor編輯器的視訊主要容易出現幾個問題：

1、新增視訊之後，點選檢視html原始碼，結果丟失src後面的連結；

2、視屏編輯器預覽BUG；

3、新增視屏後百度編輯器預覽BUG；

這三個問題，本文將分別講解：

一、丟失src後面的連結問題


這個問題其實網上有很多大神已經找到關鍵點了：白名單！沒錯，就是這個！

這個問題可以參考這個兩個帖子：

其實就是在ueditor.config.js的白名單whitList:裡面加上src欄位，這樣就不會被過濾了。

img:    ['src', 'alt', 'title', 'width', 'height', 'id', '_src', '_url', 'loadingclass', 'class', 'data-latex'], 
//視訊部分白名單********
video:  ['autoplay', 'controls', 'loop', 'preload', 'src', 'height', 'width', 'class', 'style'],  
source: ['src', 'type'],  
embed:  ['type', 'class', 'pluginspage', 'id', 'src', 'width', 'height', 'align', 'bgcolor', 'style', 'wmode', 'play',  
	'loop', 'menu', 'allowscriptaccess', 'allowfullscreen'],
iframe: ['src', 'class', 'height', 'width', 'max-width', 'max-height', 'align', 'frameborder', 'allowfullscreen']
//********
img裡面為什麼要加上'_src'和'_url'，第一篇部落格裡面說是因為編輯器在切換原始碼的過程中過濾掉img的_url屬性（用來儲存視訊url）_src/plugins/video.js裡處理的是_url，而不是_src。

然而，問題來了，居然沒有用！！！！罵人

折騰了半天，最後發現只要把 whitList: 改成 whiteList:就好了。原始碼中少了一個e，一口血吐出來。想問百度UEditor的開發大神麼英語六級過了麼？


二、視屏編輯器預覽BUG

關於視訊編輯器的問題個人沒找到有解釋清楚的，折騰了半天還是自己看原始碼搞明白了，這裡讓我慢慢說。

視屏編輯器的bug在這裡：


然而在確認之後，在UEditor的編譯器上，把滑鼠放在視訊位置，彈出選單，點選了下方的“修改”按鈕


開啟之後，奇蹟出現了。。


暈死，怎麼會這樣。我找了半天，終於在視訊編譯器對應的video.js中找到問題了，就是這個方法：

/**
     * 監聽url改變事件
     * @param url
     * @modify ie9以上使用oninput屬性監聽，onpropertychange不穩定
     */
    function addUrlChangeListener(url){
        if (browser.ie) {
        	url.onpropertychange = function () {
        			createPreviewVideo( this.value );
        } else {
            url.addEventListener( "input", function () {
                createPreviewVideo( this.value );
            }, false );
        }
    }


這個方法中，url變數是視訊編譯器上輸入“視訊網址”的html Dom物件，我這裡用的IE11測試的，然後onpropertychange這個方法就出現了問題。

這個方法的目的是監聽這個html Dom物件是否發生了value變化，但是這對於ie11而言第一次開啟卻不起效果？！就比如說首次載入的時候就不行，首次載入的程式碼在這裡（我只是想向大神證明我沒胡說）：


由於IE11已經能支援HTML5的規範了，所以可以直接用oninput方法，這裡把上述函式改為：

/**
     * 監聽url改變事件
     * @param url
     * @modify ie9以上使用oninput屬性監聽，onpropertychange不穩定
     */
    function addUrlChangeListener(url){
        if (browser.ie) {
        	if(browser.ie11Compat==true
        			|| browser.ie9Compat == true){
        		url.oninput = function () {
        			createPreviewVideo( this.value );
        		}
        	}else{
        		//ie9以下
        		url.onpropertychange = function () {
        			createPreviewVideo( this.value );
        		}
        	}
        } else {
            url.addEventListener( "input", function () {
                createPreviewVideo( this.value );
            }, false );
        }
    }

這樣首次開啟就也能播放視訊了。


上述browser.ie11Compat==true和browser.ie9Compat == true請參照ueditor.all.js中這部分程式碼：

browser.ie11Compat = document.documentMode == 11;
        /**
         * @property { boolean } ie9Compat 檢測瀏覽器模式是否為 IE9 相容模式
         * @warning 如果瀏覽器不是IE， 則該值為undefined
         * @example
         * ```javascript
         * if ( UE.browser.ie9Compat ) {
         *     console.log( '當前瀏覽器執行在IE9相容模式下' );
         * }
         * ```
         */
        browser.ie9Compat = document.documentMode == 9;

好，這樣解決了一般網路視訊的播放問題，但是又有個問題來了，如果連線地址不是flash格式，而是普通的mp4檔案地址問麼辦？

修改上述函式，在flash流路徑下加上

type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"

這兩條屬性，就可以相容路徑字尾為.mp4的視訊流播放了。效果如下：


可以看到，這是字尾為.MP4的視屏流，也可以預覽播放成功了。
網上有些人直接去掉了這兩條屬性，我試過這樣對於flash流也能播放成功，但是很不穩定，電腦都宕機過幾回。。騰訊給的分享連結地址裡面也是有這兩條屬性的，所以我建議對於flash流最好還是也帶著吧。
三、新增視屏後百度編輯器預覽BUG
百度編輯器預覽BUG主要是因為在編譯器中顯示成了一張圖片而不是視訊。

關於這個我參考了一位作者的做法：

http://blog.csdn.net/belen_xue/article/details/73252802
個人認為其做法有點粗暴，甚至可能導致一部分問題，具體我慢慢細說。
首先，在引入js包的時候，請不要使用ueditor.all.min.js，因為這是壓縮過的js，原始碼為ueditor.all.js，可修改。



那麼接下來就要對ueditor.all.js進行操刀了！
先找到這個函式me.commands["insertvideo"] ，作者的做法直接將引數“image”改為了“embed”，認為這是視訊就應該這樣改：



改完之後，確實能確保編譯器中能看到視訊了，而不是圖片了，但是視窗卻不能關閉了，然後作者就又把上面那個for迴圈刪了，原因是因為改完後找不到 id 這個屬性了；

接下來在creatInsertStr方法中，switch的case 'embed': 分支中，str去掉了這兩個屬性：

type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"

這樣確實能保證絕大多數視訊都能正常顯示了，但是還是同video.js中的問題一樣，穩定性不好，另外還有個非常大的問題，如果點選檢視原始碼（那個html按鈕），再返回，又會變成圖片！
怎麼辦？

我在creatInsertStr方法下方直接發現了一個方法：

發現這個方法其實是在做圖片和視訊的切換。如果切換到檢視html，或者呼叫獲取編譯器內容的getContent()方法時，會切回成embed標籤，也就是嵌入視訊標籤，切換回預覽頁面時，又會切換回圖片顯示。也就是說，按照那位作者的做法，這個方法內容也必須註釋掉，且兩個IF都要註釋。

function switchImgAndVideo(root,img2video){
        utils.each(root.getNodesByTagName(img2video ? 'img' : 'embed video'),function(node){
        	//去掉轉換
            var className = node.getAttr('class');
//            if(className && className.indexOf('edui-faked-video') != -1){
//                var html = creatInsertStr( img2video ? node.getAttr('_url') : node.getAttr('src'),node.getAttr('width'),node.getAttr('height'),null,node.getStyle('float') || '',className,img2video ? 'embed':'image');
//                node.parentNode.replaceChild(UE.uNode.createElement(html),node);
//            }
//            if(className && className.indexOf('edui-upload-video') != -1){
//                var html = creatInsertStr( img2video ? node.getAttr('_url') : node.getAttr('src'),node.getAttr('width'),node.getAttr('height'),null,node.getStyle('float') || '',className,img2video ? 'video':'image');
//                node.parentNode.replaceChild(UE.uNode.createElement(html),node);
//            }
        });
    }
這樣實踐後，確實不會再出現切回圖片的問題了，但是我在想，為何百度UEditor的開發人員非要把視訊轉為圖片顯示呢？


看到這個了嗎，如果按照作者的做法換成視訊的話，這個功能選單自然就沒有了。
另外按照作者的做法，如果這裡是視訊流的話，在編譯器預覽頁面上刪除視訊，而視訊如果正在播放，有些播放器可能會這樣：



視訊是被刪了，可他附在頁面上還在播放呢！

接下來我說下個人的做法：
me.commands["insertvideo"]方法，將上傳和嵌入分開處理，for迴圈不需要刪除，因為下面有辦法解決（不就是少個id嗎？我加上不就完了？）。

me.commands["insertvideo"] = {
        execCommand: function (cmd, videoObjs, type){
            videoObjs = utils.isArray(videoObjs)?videoObjs:[videoObjs];
            var html = [],id = 'tmpVedio', cl;
            for(var i=0,vi,len = videoObjs.length;i<len;i++){
                vi = videoObjs[i];
//                cl = (type == 'upload' ? 'edui-upload-video video-js vjs-default-skin':'edui-faked-video');
//                html.push(creatInsertStr( vi.url, vi.width || 420,  vi.height || 280, id + i, null, cl, 'image'));
                if(type == 'upload'){
                	cl = 'edui-upload-video video-js vjs-default-skin';
                	html.push(creatInsertStr( vi.url, vi.width || 420,  vi.height || 280, id + i, null, cl, 'video'));	
                }else{
                	cl = 'edui-faked-video';
                	html.push(creatInsertStr( vi.url, vi.width || 420,  vi.height || 280, id + i, null, cl, 'embed'));
                }
            }
            me.execCommand("inserthtml",html.join(""),true);
            var rng = this.selection.getRange();
            for(var i= 0,len=videoObjs.length;i<len;i++){
                var img = this.document.getElementById('tmpVedio'+i);
                domUtils.removeAttributes(img,'id');
                rng.selectNode(img).select();
                me.execCommand('imagefloat',videoObjs[i].align);
            }
        },
然後在creatInsertStr方法中，修改embed的處理方式：
 
case 'embed':
 	if(utils.html(url) && utils.html(url).indexOf('.swf') != -1){
            str = '<embed type="application/x-shockwave-flash" class="' + classname + '" pluginspage="http://www.macromedia.com/go/getflashplayer"' +
                (id ? 'id="' + id+'"' : '') +' src="' +  utils.html(url) + '" width="' + width  + '" height="' + height  + '"'  + (align ? ' style="float:' + align + '"': '') +
                ' wmode="transparent" play="true" loop="false" menu="false" allowscriptaccess="never" allowfullscreen="true" >';
        }else{
            //非flash流採用流播放模式，同上傳視訊一樣
            var ext = url.substr(url.lastIndexOf('.') + 1);
            if(ext == 'ogv') ext = 'ogg';
            str = '<video' + (id ? ' id="' + id + '"' : '') + ' class="' + classname + ' video-js" ' + (align ? ' style="float:' + align + '"': '') +
                ' controls autoplay="autoplay" width="' + width + '" height="' + height + '" src="' + url + '" data-setup="{}">' +
                '<source src="' + url + '" type="video/' + ext + '" /></video>';
        }
  	break;


這裡判斷一下，如果不是flash流的話就採用上傳檔案的方式去顯示內容，也就是用video標籤這種方式，這樣就不用會出現刪除視訊後還附在頁面上播放的情況（之前那種是和播放器有關係）；

另外，如果是flash流的話，也就是embed標籤，我這裡將id屬性新增上了，然後再在embed標籤的白名單裡面配置上id屬性就行了，這樣就不需要刪除前面那個函式的for迴圈了。如果你是按我上面的那個白名單配置的話，就已經配好咯大笑。

最後就是註釋掉轉換函式的內容：

function switchImgAndVideo(root,img2video){
        utils.each(root.getNodesByTagName(img2video ? 'img' : 'embed video'),function(node){
        	//去掉轉換
            var className = node.getAttr('class');
//            if(className && className.indexOf('edui-faked-video') != -1){
//                var html = creatInsertStr( img2video ? node.getAttr('_url') : node.getAttr('src'),node.getAttr('width'),node.getAttr('height'),null,node.getStyle('float') || '',className,img2video ? 'embed':'image');
//                node.parentNode.replaceChild(UE.uNode.createElement(html),node);
//            }
//            if(className && className.indexOf('edui-upload-video') != -1){
//                var html = creatInsertStr( img2video ? node.getAttr('_url') : node.getAttr('src'),node.getAttr('width'),node.getAttr('height'),null,node.getStyle('float') || '',className,img2video ? 'video':'image');
//                node.parentNode.replaceChild(UE.uNode.createElement(html),node);
//            }
        });
    }

這種做法雖然失去了那些小選單的功能，但是測試之後，整體也是非常穩定的。


這樣刪除視訊後不會出現附在上面繼續播放的問題。

PS：很多屬性，比如：edui-faked-video、edui-upload-video這些，其實都是開發者早就設定好為了實現某些功能的，所以隨意的更改他們肯定會意味著不穩定或者功能確實等各式各樣的問題。我今天研究了一天，發現其實這兩個屬性的目的就是為了做圖片和視訊轉換，然後在預覽介面，圖片的話就可以使用那些選單功能。所以看，其實這些問題，百度UEditor的開發者們早就想到了，而我們非要畫蛇添足的去改，是不是有些“捨本逐末”的味道呢？

以前做專案遇到這種情況往往也總是不擇手段，能解決問題就好，可現在卻越來越重視程式的魯棒性。其實很多開源的工具，別人能放出來給大家用，自然是穩定的，若是需求不滿足，我們要改也不能改得太暴力，若不符合開發者的初衷，自然改出來的功能也容易出問題。

今天一晚上加班寫的文件，可能難免有些寫的不正確或者理解不到位的地方，也忘各位大神指正！

相關推薦

百度UEditor編輯器視訊相關bug彙總和穩定解決方案

百度UEditor編輯器的視訊是個很頭疼的問題，從昨晚到今天折騰了一天，也看了不少帖子，很多都是隻治標不治本，而且有很多改法也是忽略本質，不過受大神啟發，自己還是琢磨出來了。 百度UEditor編輯器的視訊主要容易出現幾個問題： 1、新增視訊之後，點選檢視html原始碼，結

頁面插入百度UEditor編輯器

height blog 含義 復制 保留 了解 com mat ext 工作中用到了百度的富文本。以下總結記錄一下，UEditor嵌入網頁的方法。 第一步 到百度UEditor官網下載所需版本：http://ueditor.baidu.com/website 本次下載

百度Ueditor編輯器的Html模式自動替換樣式的解決方法

tor tail classname 功能 lai empty als 包含 emp 百度的Ueditor編輯器出於安全性考慮，用戶在html模式下粘貼進去的html文檔會自動被去除樣式和轉義。雖然安全的，但是非常不方便。 做一下修改把這個功能去掉。 一、打開ueditor

.Net Core 使用百度UEditor編輯器

緩存配置 fix oid format public 管理器 gui proc cti 一、準備文件 1. 下載UEditor官方版本.刪除其中後端文件。保留後端文件夾中的config.json文件 2. 在NuGet管理器中搜索UEditorNetCore,拿到項目地址

百度ueditor編輯器 自動加P最新解決辦法

自動 有時 過時 天發 ueditor min 朋友 tor 百度ueditor 今天有個客戶提出個需求，不讓百度ueditor編輯器在空白文檔自動添加<p><br/><p>，在網上找了一圈，大部分是解決LI裏自動套P，還有一部分也是碰到

web編輯器——百度UEditor編輯器使用教程與使用方法

  我們在做網站的時候，網站後臺系統一般都會用到 web 編輯器，今天筆者就給大家推薦一款百度 UEditor 編輯器。關於這款百度 UEditor 編輯器官網上也有簡單的教程，不過看著比較費勁，今天筆者就跟大家分享一下百度 UE

怎樣在百度UMeditor編輯器中插入騰訊和愛奇藝網站視訊？

百度UMeditor線上編輯器有插入視訊的功能，但是預設只支援優酷網的視訊智慧分析提取，其它視訊站是不支援的，但是同樣也可以插入。 原理很簡單，就是複製騰訊、愛奇藝等視訊的FLASH地址即可。 在百度UMeditor線上編輯器插入騰訊、愛奇藝等視訊的FLASH地址時，會提

百度UEditor編輯器的簡單使用方法

百度UEditor編輯器的官方下載地址： ueditor 官方地址：http://ueditor.baidu.com/website/index.html 開發文件地址：http://ueditor.baidu.com/website/document.html 下載地址：

百度ueditor編輯器程式碼高亮

百度的ueditor是國內比較好用的富文字編輯器，這裡要講解的是ueditor中一個很小的功能：程式碼高亮； 對於我們這些寫個部落格三句不離程式碼的碼農們來說，能看到段高亮的程式碼那欣喜是無以言表的； 沒圖我說個。。；上圖；以上篇文章為例； 示例環境：ueditor

dede織夢自帶編輯器替換百度ueditor編輯器

用過dedecms的朋友都知道dede自帶的文字編輯器很不好用，且有些功能還需要我們自己手動去修改原始碼，才能完成我們想要的效果。現在廣大用dedecms的朋友們，你們有福啦！我們可以利用百度的Ueditor編輯器來改變這一狀況，讓dede的文字編輯功能變得更加的強大。

關於Struts2+spring+maven中使用百度UEditor編輯器顯示未找到上傳資料的解決方案

首先上個圖，看看你的是不是這個問題：如果是請繼續往下看，不要急，急了就會浪費更多的時間，這是我在解決這個為題中學到的。 解決思路是，重寫struts2中的一個轉換的類，然後配置struts2使用我們重寫的這個類。 我在網上找了一段程式碼 即增加建立一個過濾器，用來過濾ue

二.百度UEditor編輯器之配置檔案：ueditor.config.js

百度UEditor編輯器之配置檔案：ueditor.config.js，可以在這裡配置整個編輯器的特性。 編輯器資原始檔根路徑配置:window.UEDITOR_HOME_URL = "/xxxx/xxxx/"；在開發過程中可以配置為如下： var URL =window

百度UEditor編輯器關閉抓取遠端圖片功能（預設開啟)

這個坑孃的功能，開始時居然不知道如何觸發，以為有個按鈕，點選一下觸發，翻閱了文件，沒有發現，然後再網路上看到原來是複製貼上非白名單內的圖片到編輯框時觸發，坑娘啊............... 問題又來了：今天在寫百度UEditor編輯器的【取遠端圖片功能】時有碰到：該功能如

百度UEditor編輯器setContent innerHtml 未定義報錯。

1關於很多同學提到的setContent報錯的問題，由於編輯器例項化之後（new以後再render），不能直接呼叫setContent去給編輯器設定內容。由於此時很可能因為網速、頁面元素的多少影響到編輯器的編輯器框的渲染速度。 當你render完以後，直接使用setCont

PHPCMS V9整合百度UEditor編輯器操作詳解

最近的一個專案使用PHPCMS，而自帶的ckeditor編輯器一點都不好用，於是就整合百度UEditor。支援圖片批量上傳,上傳附件等功能，自己整理一下步驟如下，修改前請先備份。1、下載Ueditor官網：http://ueditor.baidu.com/website/download.html2、上傳ue

釋出百度ueditor編輯器 for django

近在學習Django框架，按照網上教程整合DjangoUeditor時，出現錯誤，錯誤提示為：from widgets import UEditorWidget,AdminUEditorWidgetImportError: No module named ‘widgets’經

百度ueditor編輯器asp版本地配置成功伺服器上不能上傳圖片提示500錯誤的解決方法

使用百度開源ueditor編輯器不能上傳圖片並報伺服器500錯誤。 初看是 Uploader.Class 的 fs.CreateFolder( path ) 這條語句不能建立目錄，懷疑許可權問題，提供所有許可權後，依然不行。 最後參考百度官方文件將該程式碼內函式 修改A

為百度文字編輯器UEditor新增附件管理功能

最近朋友的一個專案需要一個文字編輯器，讓我突然想起那個百度編輯器UEditor，功能比較齊全而且開源，但也有很多bug和不足。 一年前我就曾經關注過，讓我感到最不能容忍的不足就是，新增的附件的地方，如果檔案和伺服器端重名這樣的錯誤如果能夠容忍，但如果上傳錯了，我想刪除

Java maven專案整合ueditor（百度本編輯器）外掛詳解

相信很多專案都要用到類似的功能，ueditor是一個非常強大的外掛，當然也有直接整合好的直接引用就行了。在這裡講一下百度編輯器的整合過程，本人是走了好多彎路，在這裡希望各位開發的朋友少走些彎路，節約開發時間。 1，首先需要下載ueditor包  我下載的是  ueditor

百度文字編輯器在asp.net 中的應用

第一步：下載百度文字編輯器： ueditor1_4_3_3-gbk-net.zip , 並把它拷貝到網站根目錄下面（可以參考下里面Index.html 裡面的呼叫案例） 第二步：在前臺aspx頁面加入程式碼： <script type="text