富文字編輯器UEditor自定義工具欄（一、基礎配置與字型、背景色、行間距、超連結實現）
導讀：UEditor 是由百度「FEX前端研發團隊」開發的所見即所得富文字web編輯器，功能強大，可定製，是一款優秀的國產線上富文字編輯器，編輯器內可插入圖片、音訊、視訊等。
一、UEditor自定義工具欄效果圖如下：
二、UEditor富文字編輯器環境搭建及專案引用
環境搭建不再贅述，請自行查閱或者參考以下連結
1.UEditor官網：http://ueditor.baidu.com/website/
2.UEditor官網演示：http://ueditor.baidu.com/website/onlinedemo.html
3.UEditor官網入門部署和體驗：http://fex.baidu.com/ueditor/
4.UEditor新增一個普通按鈕:http://blog.csdn.net/hougelou/article/details/40117881
三、UEditor自定義工具欄-常規按鈕
1.思路
隱藏掉UEditor自帶工具欄，使用自定義的工具欄，在功能按鈕上新增（呼叫）對應的UEditor相關命令
2.例項化編輯器
1 <div class="editBox"> 2 <textarea id="editor" type="text/plain"></textarea> 3 </div>Html部分
1 <script type="text/javascript"> 2JS例項化編輯器var ue = UE.getEditor('editor', { 3 autoHeightEnabled: true 4 ,initialFrameWidth: '100%' //初始化編輯器寬度,預設1000 5 ,minFrameWidth: '760' //編輯器拖動時最小寬度,預設800 6 ,initialFrameHeight: 450 //初始化高度 7 ,minFrameHeight:630 8 ,toolbars: [ 9 [ 10 'fullscreen', 'source', '|', 'undo', 'redo', '|',11 'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|', 12 'rowspacingtop', 'rowspacingbottom', 'lineheight', '|', 13 'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|', 14 'directionalityltr', 'directionalityrtl', 'indent', '|', 15 'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|', 16 'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|', 17 'simpleupload', 'insertimage', 'emotion', 'scrawl', 'insertvideo', 'music', 'attachment', 'map', 'gmap', 'insertframe', 'insertcode', 'webapp', 'pagebreak', 'template', 'background', '|', 18 'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|', 19 'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|', 20 'print', 'preview', 'searchreplace', 'drafts', 'help' 21 ] 22 ] 23 ,initialContent: "<p>請在這裡輸入正文...</p><p><br/></p><p><br/></p><p><br/></p><p><br/></p><p><br/></p><p><br/></p><p><br/></p>_ueditor_page_break_tag_<p><br/></p>"//預設內容 24 ,elementPathEnabled: false//元素路徑 25 ,wordCount: false//字數統計 26 ,enableAutoSave: false //自動儲存 27 ,autoSyncData: false//自動同步編輯器要提交的資料 28 ,autoFloatEnabled:false//工具欄懸浮 29 ,enableContextMenu:false //右鍵選單 30 ,lineheight:['1', '1.5','1.75','2', '3', '4', '5']//行高 31 ,pasteplain:true //是否預設為純文字貼上 32 ,catchRemoteImageEnable:false//遠端圖片抓取關閉 33 ,imagePopup:false//圖片操作的浮層開關，預設開啟 34 35 })
說明：編輯器有很多可自定義的引數項，在例項化的時候可以傳入給編輯器，這樣不必改動原始碼，不影響其他地方的呼叫（此處例項化為滿足個性化需求，所傳引數較多）；
（1）JS例項化編輯器時toolbars引數配置，本示例中配置了所有功能按鈕(可按需配置)；
（2）不配置toolbars引數，則在自定義功能按鈕上呼叫相關命令時，報異常，操作會無效，因此圖省事，配置了所有按鈕；
（3）本示例中使用的是1.4.3的.Net版本
3.隱藏工具欄的方法
（1）若是所有專案或整個網站都使用同一種樣式的編輯器，可以考慮通過改動原始碼，隱藏工具欄；
按此路徑“ueditor\themes\default\css”開啟ueditor.css檔案，搜尋或在行號大約148行的“.edui-default .edui-editor-toolbarbox處新增display:none“；
注：此種方法在頁面載入時，UEditor自帶工具欄不會出現閃現消失的情況；
（2）通過前臺JS配置及JS指令碼控制工具欄的隱藏，避免對其他地方引用UEditor造成影響；
1 //ue為例項化出來的UEditor變數 2 ue.addListener("ready",function(ue) { 3 //編輯器準備就緒後會觸發該事件 4 $(".edui-default .edui-editor-toolbarbox").css("display","none"); 5 }) 6 ue.addListener("langReady",function () { 7 //語言載入完成會觸發該事件 8 $(".edui-default .edui-editor-toolbarbox").css("display","none"); 9 })JS隱藏UEditor工具欄
1 <a href="javascript:void(0);" class="left textSet bold" title='加粗' onclick="ue.execCommand('bold')"><img src="@Html.SourceImageUrl("/images/personalHomepage/toolsbar-icon4.png")" width="11" height="17" /></a>Html部分以字型加粗為例呼叫UEditor命令
注：其中ue為UEditor例項化後的全域性變數，與方法（1）比較，此種方法在頁面載入時，UEditor自帶工具欄有可能會出現短暫閃現又消失的情況，不過影響不大，可忽略；
附加一些其他命令（其他命令詳見 UEditor官網命令列表 ：http://ueditor.baidu.com/doc/#COMMAND.LIST）：
- 斜體 ue.execCommand('italic')；
- 下劃線 ue.execCommand('underline')；
- 居中對齊 ue.execCommand('justify','center')；
- 首行縮排 ue.execCommand('indent')；
四、UEditor自定義工具欄-非常規按鈕
加粗、斜體、下劃線、居中對齊、首行縮排等功能按鈕可直接呼叫UEditor對應相關命令，但涉及懸浮窗、彈層的功能按鈕則需要特殊處理。
（1）字型顏色
自定義工具欄-字型顏色效果圖
工具欄字型顏色功能按鈕原始碼
- 檢視字型顏色對應的Html原始碼，對應id為“eudi24“,點選事件為 $EDITORUI["edui24"]._onButtonClick(event, this)；
- 在自定義工具欄所在頁面檢視字型顏色功能按鈕對應id，例項化時引數配置不同，功能按鈕對應id可能會變化；
- 假設自定義工具欄所在頁面字型顏色功能按鈕對應id為“eudi24“，實現呼叫命令如下：
1 <a href="javascript:void(0);" id="edui24" class="left textSet color" title='字型顏色' onclick="$EDITORUI['edui24']._onArrowClick(); "> 2 <img src="@Html.SourceImageUrl("/images/personalHomepage/toolsbar-icon7.png")" width="15" height="17" /> 3 </a>自定義工具欄-字型顏色呼叫命令
注：功能按鈕必須要有id屬性，字型顏色懸浮窗會根據id來定位懸浮窗位置，沒有id，字型顏色懸浮窗位置會不正確；
（2）背景色
原理同字型顏色
1 <a href="javascript:void(0);" id="edui27" class="left textSet bgcolor" title='背景色' onclick="ue.focus();$EDITORUI['edui27']._onArrowClick(); "> 2 <img src="@Html.SourceImageUrl("/images/personalHomepage/toolsbar-icon8.png")" width="19" height="17" /> 3 </a>自定義工具欄-背景色呼叫命令
（3）字型、字號
自定義工具欄-字型效果圖
1 <div class="fontFamily select left" id="edui92" title="字型" onclick="$EDITORUI['edui92']._onArrowClick();"> 2 <p style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">宋體</p> 3 </div> 4 <div class="fontSize select left" id="edui105" title="字號" onclick="$EDITORUI['edui105']._onArrowClick();"> 5 <p>16px</p> 6 </div>自定義工具欄-字型、字號呼叫命令
本示例中，通過呼叫了字型、字號相關命令來實現，也可以通過切圖人員給的相關指令碼來實現。
此外還需要處理的情況：
- 選擇字型、字號後，字型、字號功能按鈕顯示的字型、字號相應變化；
1 ue.addListener("ready",function(ue) { 2 //edui93_content元素為動態生成，因此需要使用以下方法繫結事件 3 $("#edui_fixedlayer").on("click","#edui93_content .edui-label.edui-listitem-label.edui-default",function () { 4 $("#edui92").find("p").html($(this).html().trim("'"));//字型 5 }); 6 $("#edui_fixedlayer").on("click","#edui106_content .edui-label.edui-listitem-label.edui-default",function () { 7 $("#edui105").find("p").html($(this).html().trim("'"));//字號 8 }); 9 })選擇字型、字號時，字型、字號相應變化
- 編輯器內文字部分獲得焦點後，字型，字號應該為焦點處文字的字型、字號；
1 ue.addListener("selectionchange",function () { 2 //字型、字號變化 3 $("#edui92").find("p").html(this.queryCommandValue('fontfamily').split(",")[0]);//字型 4 $("#edui105").find("p").html(this.queryCommandValue('fontsize').split(",")[0]);//字號 5 })編輯器內文字獲得焦點，字型字號處理
（4）行間距
自定義工具欄-行間距效果圖
1 <div class="left lineHeight" id="edui67" title="行間距" onclick="$EDITORUI['edui67']._onArrowClick(); "> 2 <p><img src="@Html.SourceImageUrl("/images/personalHomepage/toolsbar-icon14.png")" width="18" height="17" /></p> 3 </div>自定義工具欄-行間距呼叫命令
UEditor例項化時（見 “三、UEditor自定義工具欄-常規按鈕 JS例項化編輯器“”）可根據需求配置所需要的行間距，也可以不配置行間距，使用UEditor預設配置；’
//,lineheight:['1', '1.5','1.75','2', '3', '4', '5']
鑑於1倍行間距文字較密集，產品經理要求行間距預設為1.5，實現的方式是改動原始碼：
按此路徑“ueditor\ueditor.all.js“開啟ueditor.all.js檔案約6906行，新增“line-height:1.5em“,同理也可更改其他預設樣式；
自定義工具欄-行間距預設1.5原始碼修改
注：預設1.5行間距，則在編輯器初始化完之後，行間距應該預設勾選1.5，處理方法如下：
1 ue.addListener("ready",function(ue) { 2 //行間距預設勾選1.5 3 var myUeditor=this; 4 $("#edui67").on("click",function () { 5 setTimeout(function(){ $("#edui68_body").css("margin-top","1px")},1); 6 if ($("#edui68_body .edui-state-checked").size()<=0 ) { 7 $("#edui70").addClass("edui-state-checked"); 8 myUeditor.execCommand('lineheight','1.5'); 9 } 10 }) 11 })自定義工具欄-預設勾選1.5行間距
（5）超連結
自定義工具欄-超連結效果圖
1 <a href="javascript:void(0);" class="left media link" id="edui135" onclick="return $EDITORUI['edui135']._onClick(event, this);" title="插入連結"> 2 <img src="@Html.SourceImageUrl("/images/personalHomepage/toolsbar-icon15.png")" width="15" height="17" /> 3 </a>自定義工具欄-超連結呼叫命令
結語
本篇主要介紹富文字編輯器1.4.3版本自定義工具欄實現方法，探討的功能按鈕有加粗、斜體、居中對齊（居左對齊、居右對齊）、首行縮排常規按鈕，字型、字號、行間距涉及懸浮窗按鈕及超連結涉及彈層按鈕功能實現及一些細節處理；不足或錯誤之處，歡迎探討與斧正。下一篇將介紹自定義工具欄插入圖片、音訊、視訊涉及彈層的個性化功能按鈕實現。