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

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

傳送門：富文本編輯器UEditor自定義工具欄（1、基礎配置與字體、背景色、行間距、超連接實現）

1、效果圖

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

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

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

注：爲了截圖，縮小了瀏覽器，所以視頻列表時間顯示樣式稍有問題，請自行忽略。

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

思路

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

1 <a href="javascript:void(0);" class="left media pic" onclick="GetMultimediaGroupData(2);GetPagedMultimediaData(2,1,pageSize);openLayer('popUpImg');" title="插入圖片"><img src="@Html.SourceImageUrl("/images/personalHomepage/toolsbar-icon16.png")" width="15" height="17" /></a>
2 <a href="javascript:void(0);" class="left media voice" onclick="GetMultimediaGroupData(3);GetPagedMultimediaData(3,1,pageSize);openLayer('popUpAudio');" title="插入音頻"><img src="@Html.SourceImageUrl("/images/personalHomepage/toolsbar-icon17.png")" width="15" height="17" /></a>
3 <a href="javascript:void(0);" class="left media video" onclick=" GetMultimediaGroupData(4);GetPagedMultimediaData(4,1,pageSize);openLayer('popUpVideo');" title="插入視頻"><img src="@Html.SourceImageUrl("/images/personalHomepage/toolsbar-icon18.png")" width="15" height="17" /></a>

Html插入圖片、音頻、視頻功能按鈕處理

 1 <div class="modal modalPic" id="popUpImg" style="display:none">
 2     <a href="javascript:void(0)" class="close" onclick="CancelInsertMultimedia(2)"></a>
 3     <h1>插入圖片</h1>
 4     <div class="container" id="pop_multimedia_2">
 5         <div class="sideList">
 6             <ul class="dItems"></ul>
 7         </div>
 8         <div class="cBox">
 9             <div class="progress" id="tip_upload_progress_2" data-filename="" data-new-filename="" style="display:none">
10                 <p class="left"><span class="name" id="upload_title_2">寵物百科全書.jpg</span><span class="data">(191.8K)</span></p>
11                 <div class="bar left"><span></span></div>
12                 <a href="javascript:void(0)" class="left" onclick="CancelUpload(2)">取消上傳</a>
13             </div>
14             <div class="oper">
15                 <input type="checkbox" class="left" id="all" onclick="ChooseAll()" /><label class="left" for="all">全選</label>
16                 <div class="upload1 right" style="text-align:left;">
17                     <input type="file" name="file_upload_2" id="file_upload_2">
18                 </div>
19             </div>
20             <ul class="exhibit"></ul>
21             <div class="info">
22                 <p class="left">已選 <span>0</span> 個，可選 <i>100</i> 個</p>
23                 <div class="pageY right"><a href="javascript:void(0)" class="btn1"></a><a href="javascript:void(0)" class="btn2"></a><span><i>2</i>/<i>3</i></span><a href="javascript:void(0)" class="btn3"></a><a href="javascript:void(0)" class="btn4"></a></div>
24             </div>
25             <div class="btns">
26                 <a href="javascript:void(0)" class="right cancel" onclick="CancelInsertMultimedia(2)">取 消</a>
27                 <a href="javascript:void(0)" class="right sure" onclick="InsertHtmlIntoUE(2)">確 定</a>
28             </div>
29         </div>
30     </div>
31 </div>

自定義工具欄-插入圖片-圖片彈層對應Html代碼

（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（）函數裏調用了此函數，用於更新分頁相關信息；

 1 function ChangePageInfo(fileType,pageIndex,totalRecord) {
 2         var pageCount= parseInt((totalRecord + pageSize -1) / pageSize);
 3         var divPage=$("#pop_multimedia_{0} .cBox .info".format(fileType));
 4         var prevPage=pageIndex<=1?1:pageIndex-1;
 5         var nextPage=pageIndex+1>=pageCount?pageCount:pageIndex+1;
 6         $(divPage).find(".left span").html("0");//已選
 7         $(divPage).find(".left i").html(totalRecord);//可選
 8         $(divPage).find(".pageY.right").find("span>i:eq(0)").html(totalRecord<=0?0:pageIndex);//當前頁
 9         $(divPage).find(".pageY.right").find("span>i:eq(1)").html(pageCount);//總頁數
10         if (totalRecord>0) {
11             if(pageIndex<=1) $(divPage).find(".pageY.right .btn1").removeAttr("onclick").css({"cursor":"not-allowed"});//首頁不可用
12             else $(divPage).find(".pageY.right .btn1").css({"cursor":""}).attr({"onclick":"GoPage({0},{1})".format(fileType,1)});//首頁
13             if (pageIndex<=1) $(divPage).find(".pageY.right .btn2").removeAttr("onclick").css({"cursor":"not-allowed"});//前一頁不可用
14             else $(divPage).find(".pageY.right .btn2").css({"cursor":""}).attr({"onclick":"GoPage({0},{1})".format(fileType,prevPage)});//前一頁
15             if (pageIndex>=nextPage) $(divPage).find(".pageY.right .btn3").removeAttr("onclick").css({"cursor":"not-allowed"});//下一頁不可用
16             else $(divPage).find(".pageY.right .btn3").css({"cursor":""}).attr({"onclick":"GoPage({0},{1})".format(fileType,nextPage)});//下一頁
17             if (pageIndex>=nextPage) $(divPage).find(".pageY.right .btn4").removeAttr("onclick").css({"cursor":"not-allowed"});//尾頁不可用
18             else $(divPage).find(".pageY.right .btn4").css({"cursor":""}).attr({"onclick":"GoPage({0},{1})".format(fileType,pageCount)});//尾頁
19         }
20         else {//不可用
21             $(divPage).find(".pageY.right .btn1").removeAttr("onclick").css({"cursor":"not-allowed"});//首頁
22             $(divPage).find(".pageY.right .btn2").removeAttr("onclick").css({"cursor":"not-allowed"});//前一頁
23             $(divPage).find(".pageY.right .btn3").removeAttr("onclick").css({"cursor":"not-allowed"});//下一頁
24             $(divPage).find(".pageY.right .btn4").removeAttr("onclick").css({"cursor":"not-allowed"});//尾頁
25         }
26     }

ChangePageInfo函數源代碼

ChangePageInfo函數裏使用的format函數爲js擴展函數，相似C#的format函數，源碼以下：

1     String.prototype.format = function () {
2         var args = arguments;
3         return this.replace(/\{\{|\}\}|\{(\d+)\}/g, function (m, n) {
4             if (m == "{{") { return "{"; }
5             if (m == "}}") { return "}"; }
6             return args[n];
7         });
8     };

string.format函數的js實現方式

1     function GoPage(fileType,pageIndex) {
2         GetPagedMultimediaData(fileType,pageIndex,pageSize);
3     }

涉及的GoPage函數源碼

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

（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端的話）

以愛奇藝網站爲例，打開某視頻的播放地址，http://www.iqiyi.com/v_19rr700mq0.html#vfrm=24-9-0-1，咱們所須要的爲紅色箭頭處的代碼，根據實際需求能夠更改或添加里面的屬性或樣式，而後執行ue.execCommand( 'inserthtml',html)命令便可插入到編輯器內；

 

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

 

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

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

按此路徑「ueditor\ueditor.all.js」打開ueditor.all.js文件，在行號大約13850行修改成以下代碼：

1     //分頁符樣式添加
2     me.ready(function(){
3         utils.cssRule('pagebreak', '.pagebreak{display:block;clear:both !important;cursor:move !important;width: 100% !important;margin:0;background:url("' + me.options.UEDITOR_HOME_URL + '/themes/default/images/ph-jt-divide.png")' + ' no-repeat center;height:16px; border:none 0}', me.document);//自定義分隔符
4     });

自定義分頁符-修改源碼

百度UEditor分頁符爲hr標籤實現：<hr class="pagebreak" noshade="noshade" size="5" style="-webkit-user-select: none;" title="舒適提示：雙擊此分隔符可拖動。">  

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

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

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

5、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");

注：若是有瀏覽器兼容性問題，沒有實現透明，可另外爲編輯器添加樣式：<textarea id="editor" type="text/plain" style=" border: 0px none;"></textarea>，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使用心得及一些細節注意事項。有不少功能及產品理念實現，沒有檢索到相關帖子或博客，實現的方法可能不止一種，介紹的方法是受限於產品及技術等多方面緣由研究出的一種多是獨創性的實現方式，但願能拋磚引玉，給予啓發性、創新性的思索和實質性的幫助，如有不足及錯誤之處，歡迎不吝賜教，給予斧正！