富文本編輯器UEditor自定義工具欄（二、插入圖片、音頻、視頻個性化功能按鈕和彈層及自定義分頁符）

本篇將簡單探討插入圖片、音頻、視頻的功能按鈕實現方式

一、效果圖

1.UEditor自定義工具欄-插入圖片功能按鈕效果圖如下：

2.UEditor自定義工具欄-插入音頻功能按鈕效果圖如下：

3.UEditor自定義工具欄-插入視頻功能按鈕效果圖如下：

註：為了截圖，縮小了瀏覽器，因此視頻列表時間顯示樣式稍有問題，請自行忽略。

二、自定義工具欄-插入圖片、音頻、視頻對應彈層實現方式

思路

使用Layer彈出層組件，將div等容器或節點內內容顯示在彈層內，利用Ajax非同步取出圖片、音頻、視頻分組數據及對應分頁數據；

（1）各彈層對應Html塊代碼分別定義一個id，如popUpImg,popUpAudio,popUpVideo,其合適子節點（用於存放分頁列表數據的節點）定義後綴為多媒體類別的id，如「pop_multimedia_3「，也可以為各彈層對應Html塊代碼定義類似「popUp_3「含多媒體類別的popUp_3的id；

（2）GetMultimediaGroupData(2)，js函數，與後台交互取出分組數據，其中括弧內參數是類別，分別對應圖片

（2）、音頻（3）、視頻（4）；

（3）GetPagedMultimediaData(2,1,pageSize)，js函數，與後台交互取出分頁的多媒體數據，第一個參數2為多媒體類別；第二個參數1為pageIndex，第1頁數據；第3個參數pageSize為每頁顯示的數據條數，全局js變數；

（4）openLayer( popUpImg )，封裝的js函數，用於打開圖片彈層，參數『popUpImg』為圖片彈層對應Html塊代碼id；

（5）ChangePageInfo（fileType,pageIndex,totalRecord），js函數，GetMultimediaGroupData（）函數里調用了此函數，用於更新分頁相關信息；

ChangePageInfo函數里使用的format函數為js擴展函數，類似C#的format函數，源碼如下：

三、自定義工具欄-插入圖片、音頻、視頻功能按鈕-將多媒體插入編輯器

（1）封裝幾個js函數GetInsertHtml（fileType）,InsertHtmlIntoUE(fileType) 等;

（2）GetInsertHtml（fileType）函數為取得需要插入到UEditor編輯器內的html，函數裡面可以做一些處理，圖片可以用img標籤，音頻和視頻建議用audio/Video標籤(只限支持H5的瀏覽器，IE8及其以下版本不支持H5)；

（3）InsertHtmlIntoUE(fileType) 函數，調用了UEditor的插入html的命令ue.execCommand( inserthtml ,html)，其中ue為實例化出來的UEditor全局js變數，html為插入編輯器內的html源碼，根據實際需求也可以在函數里做一些其他處理；

（4）插入在線音頻功能，插入音頻功能實現是通過輸入音頻的外鏈地址來實現，類似玩QQ空間的年代，QQ音樂外鏈的地址,也可以通過輸入外鏈播放器html代碼來實現，網易雲音樂支持生成外鏈播放器；

（5）插入在線視頻功能，建議使用各視頻網站的視頻分享的通用代碼，這樣也可以實現手機wap端的正常瀏覽（如果項目或產品有PC端也有手機wap端的話）

四、自定義工具欄-自定義分頁符

百度UEditor自帶分頁符效果如下：

自定義分頁符實現思路：修改UEditor源碼，添加分頁符的背景圖片。

百度UEditor分頁符為hr標籤實現：

百度UEditor官網插入分頁符介紹：

ue.execCommand( pagebreak ); //插入一個hr標籤，帶有樣式類名pagebreak

註：其中「/themes/default/images/ph-jt-divide.png「為自定義分頁符的背景圖；

五、UEditor其他使用技巧及細節注意點

實際開發中遇到很多功能及樣式研究難題，現簡單梳理如下：

（1）統計多媒體數量

示例中，插入的圖片、音頻、視頻標籤，都添加了自定義屬性，便於後台統計多媒體數量等,後台語言為C#，使用了C#開源Html解析組件htmlagilitypack。

（2）禁用編輯器內右鍵菜單

因為多媒體需要自定義屬性以滿足個性化需求，而且暫時沒有插入表格的功能及處理遠程抓取圖片及複製、截圖到編輯器內的功能，因此禁用了編輯器內右鍵菜單，除了實例化編輯器時，需要配置 enableContextMenu:false //右鍵菜單，還需要做如下js處理：

在UEditor的ready事件下，添加$("#ueditor_0").contents().find("body").attr({"oncontextmenu":"return false;"})，其中ueditor_0為編輯器的id，當頁面只有一個編輯器時，其id即為ueditor_0。

（3）編輯器透明及無邊框

在UEditor的ready事件下添加 $("#editor,#edui1,#edui1_iframeholder").css("background","transparent").css("border","0px");$("#ueditor_0").attr("allowtransparency","true");

註：如果有瀏覽器兼容性問題，沒有實現透明，可另外為編輯器添加樣式：，style="background-color: rgba(255, 255, 255, 0); border: 0px none;"。

（4）解決在線視頻被浮動的工具欄遮擋的問題

添加wmoded屬性

var html=$(htmlVideo).attr({"wmode":"transparent" }).prop("outerHTML");也可以根據實際需求增改其他屬性。

（5）自動保存編輯內容

利用js函數setInterval，每隔一段時間（如2min）保存一次

如果標題、內容等有變動則自動保存，如果沒有任何改動則不自動保存。

（6）解除提交編輯器html內容限制

Asp.Net MVC可為Action添加 [ValidateInput(false)]特性

HttpRequest 類使用輸入驗證標誌來跟蹤是否對通過 Cookies、Form 和 QueryString 屬性訪問的請求集合執行驗證。ValidateInput 方法設置這些標誌，以便在調用 Cookies、Form 或 QueryString 屬性的 get 訪問器時執行輸入驗證。驗證的工作原理是，將所有輸入數據與具有潛在危險的數據的硬編碼列表進行對照檢查。

如果頁指令或配置啟用了驗證功能，則在頁的 ProcessRequest 處理階段調用此方法。如果未啟用驗證功能，則可通過代碼調用 ValidateInput 方法。

（7）撤銷、重做按鈕樣式顯示

撤銷、重做按鈕不可操作時有edui-state-disabled樣式，結合UEditor的afterSelectionChange事件監聽處理即可實現

回退操作默認最多為20次（maxUndoCount：20），以重做按鈕為例：

（8）默認純文本粘貼

配置pasteplain:true //是否默認為純文本粘貼

（9）音視頻在編輯器內及預覽頁播放

建議使用H5標籤結合H5播放器，可考慮videojs播放器

這樣在編輯器內及預覽頁都可以進行播放，如果考慮到IE8等低版本瀏覽器的兼容性，音視頻播放及樣式問題是一系列棘手和令人比較頭疼的難題；截至此文收筆時，我們採用的處理方案是編輯器內使用flash播放器，上傳的視頻會在服務端多次轉碼，利用後台處理將預覽頁展示的音視頻換成我們自己開發的播放器；

PC端瀏覽效果，截的長圖，自行忽略下半部分樣式問題

手機wap端瀏覽效果

結語

本篇承接上篇，介紹了UEditor在線富文本編輯器自定義工具欄，插入圖片、插入音頻、插入視頻、分頁符等個性化功能按鈕實現方式，另外簡要總結了UEditor使用心得及一些細節注意事項。有很多功能及產品理念實現，沒有檢索到相關帖子或博客，實現的方法可能不止一種，介紹的方法是受限於產品及技術等多方面原因研究出的一種可能是首創性的實現方式，希望能拋磚引玉，給予啟發性、創新性的思索和實質性的幫助，若有不足及錯誤之處，歡迎不吝賜教，給予斧正！

點擊展開全文

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！