導(dǎo)讀：UEditor 是由百度「FEX前端研發(fā)團隊」開發(fā)的所見即所得富文本web編輯器，功能強大，可定制咖刃，是一款優(yōu)秀的國產(chǎn)在線富文本編輯器泳炉，編輯器內(nèi)可插入圖片、音頻嚎杨、視頻等花鹅。
一、UEditor自定義工具欄效果圖如下：
二刨肃、UEditor富文本編輯器環(huán)境搭建及項目引用
環(huán)境搭建不再贅述，請自行查閱或者參考以下鏈接
1.UEditor官網(wǎng)：http://ueditor.baidu.com/website/
2.UEditor官網(wǎng)演示：http://ueditor.baidu.com/website/onlinedemo.html
3.UEditor官網(wǎng)入門部署和體驗：http://fex.baidu.com/ueditor/
4.UEditor添加一個普通按鈕:http://blog.csdn.net/hougelou/article/details/40117881
三箩帚、UEditor自定義工具欄-常規(guī)按鈕
1.思路
隱藏掉UEditor自帶工具欄真友，使用自定義的工具欄，在功能按鈕上添加（調(diào)用）對應(yīng)的UEditor相關(guān)命令
2.實例化編輯器
<div class="editBox">
<textarea id="editor" type="text/plain"></textarea>
</div>
<script type="text/javascript">
var ue = UE.getEditor('editor', {
autoHeightEnabled: true
,initialFrameWidth: '100%' //初始化編輯器寬度,默認1000
,minFrameWidth: '760' //編輯器拖動時最小寬度,默認800
,initialFrameHeight: 450 //初始化高度
,minFrameHeight:630
,toolbars: [
[
'fullscreen', 'source', '|', 'undo', 'redo', '|',
'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
'directionalityltr', 'directionalityrtl', 'indent', '|',
'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
'simpleupload', 'insertimage', 'emotion', 'scrawl', 'insertvideo', 'music', 'attachment', 'map', 'gmap', 'insertframe', 'insertcode', 'webapp', 'pagebreak', 'template', 'background', '|',
'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|',
'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',
'print', 'preview', 'searchreplace', 'drafts', 'help'
]
]
,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>"http://默認內(nèi)容
,elementPathEnabled: false//元素路徑
,wordCount: false//字數(shù)統(tǒng)計
,enableAutoSave: false //自動保存
,autoSyncData: false//自動同步編輯器要提交的數(shù)據(jù)
,autoFloatEnabled:false//工具欄懸浮
,enableContextMenu:false //右鍵菜單
,lineheight:['1', '1.5','1.75','2', '3', '4', '5']//行高
,pasteplain:true //是否默認為純文本粘貼
,catchRemoteImageEnable:false//遠程圖片抓取關(guān)閉
,imagePopup:false//圖片操作的浮層開關(guān)紧帕，默認打開
})
JS實例化編輯器
說明：編輯器有很多可自定義的參數(shù)項盔然，在實例化的時候可以傳入給編輯器，這樣不必改動源碼是嗜，不影響其他地方的調(diào)用（此處實例化為滿足個性化需求愈案，所傳參數(shù)較多）；
（1）JS實例化編輯器時toolbars參數(shù)配置鹅搪，本示例中配置了所有功能按鈕(可按需配置)站绪；
（2）不配置toolbars參數(shù)，則在自定義功能按鈕上調(diào)用相關(guān)命令時丽柿，報異常恢准，操作會無效，因此圖省事航厚，配置了所有按鈕顷歌；
（3）本示例中使用的是1.4.3的.Net版本
3.隱藏工具欄的方法
（1）若是所有項目或整個網(wǎng)站都使用同一種樣式的編輯器锰蓬，可以考慮通過改動源碼幔睬，隱藏工具欄；
按此路徑“ueditor\themes\default\css”打開ueditor.css文件芹扭，搜索或在行號大約148行的 “.edui-default .edui-editor-toolbarbox處添加display:none“麻顶；
注：此種方法在頁面加載時，UEditor自帶工具欄不會出現(xiàn)閃現(xiàn)消失的情況舱卡；
（2）通過前臺JS配置及JS腳本控制工具欄的隱藏辅肾，避免對其他地方引用UEditor造成影響；
//ue為實例化出來的UEditor變量
ue.addListener("ready",function(ue) {
//編輯器準備就緒后會觸發(fā)該事件
$(".edui-default .edui-editor-toolbarbox").css("display","none");
})
ue.addListener("langReady",function () {
//語言加載完成會觸發(fā)該事件
$(".edui-default .edui-editor-toolbarbox").css("display","none");
})
JS隱藏UEditor工具欄
<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部分以字體加粗為例調(diào)用UEditor命令
注：其中ue為UEditor實例化后的全局變量轮锥，與方法（1）比較矫钓，此種方法在頁面加載時，UEditor自帶工具欄有可能會出現(xiàn)短暫閃現(xiàn)又消失的情況，不過影響不大新娜，可忽略赵辕；
附加一些其他命令（其他命令詳見 UEditor官網(wǎng)命令列表 ：http://ueditor.baidu.com/doc/#COMMAND.LIST）：
- 斜體 ue.execCommand('italic')；
- 下劃線 ue.execCommand('underline')概龄；
- 居中對齊 ue.execCommand('justify','center')还惠；
- 首行縮進 ue.execCommand('indent')；
四私杜、UEditor自定義工具欄-非常規(guī)按鈕
加粗蚕键、斜體、下劃線衰粹、居中對齊锣光、首行縮進等功能按鈕可直接調(diào)用UEditor對應(yīng)相關(guān)命令，但涉及懸浮窗铝耻、彈層的功能按鈕則需要特殊處理嫉晶。
（1）字體顏色
工具欄字體顏色功能按鈕源碼
- 查看字體顏色對應(yīng)的Html源碼，對應(yīng)id為“eudi24“,點擊事件為 $EDITORUI["edui24"]._onButtonClick(event, this)田篇；
- 在自定義工具欄所在頁面查看字體顏色功能按鈕對應(yīng)id替废，實例化時參數(shù)配置不同，功能按鈕對應(yīng)id可能會變化泊柬；
- 假設(shè)自定義工具欄所在頁面字體顏色功能按鈕對應(yīng)id為“eudi24“椎镣，實現(xiàn)調(diào)用命令如下：
<a href="javascript:void(0);" id="edui24" class="left textSet color" title='字體顏色' onclick="$EDITORUI['edui24']._onArrowClick(); ">
<img src="@Html.SourceImageUrl("/images/personalHomepage/toolsbar-icon7.png")" width="15" height="17" />
</a>
自定義工具欄-字體顏色調(diào)用命令
注：功能按鈕必須要有id屬性，字體顏色懸浮窗會根據(jù)id來定位懸浮窗位置兽赁，沒有id状答，字體顏色懸浮窗位置會不正確；
（2）背景色
原理同字體顏色
<a href="javascript:void(0);" id="edui27" class="left textSet bgcolor" title='背景色' onclick="ue.focus();$EDITORUI['edui27']._onArrowClick(); ">
<img src="@Html.SourceImageUrl("/images/personalHomepage/toolsbar-icon8.png")" width="19" height="17" />
</a>
自定義工具欄-背景色調(diào)用命令
（3）字體刀崖、字號
<div class="fontFamily select left" id="edui92" title="字體" onclick="$EDITORUI['edui92']._onArrowClick();">
<p style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">宋體</p>
</div>
<div class="fontSize select left" id="edui105" title="字號" onclick="$EDITORUI['edui105']._onArrowClick();">
<p>16px</p>
</div>
自定義工具欄-字體惊科、字號調(diào)用命令
本示例中，通過調(diào)用了字體亮钦、字號相關(guān)命令來實現(xiàn)馆截，也可以通過切圖人員給的相關(guān)腳本來實現(xiàn)。
此外還需要處理的情況：
- 選擇字體蜂莉、字號后蜡娶，字體、字號功能按鈕顯示的字體映穗、字號相應(yīng)變化窖张；
ue.addListener("ready",function(ue) {
//edui93_content元素為動態(tài)生成，因此需要使用以下方法綁定事件
$("#edui_fixedlayer").on("click","#edui93_content .edui-label.edui-listitem-label.edui-default",function () {
$("#edui92").find("p").html($(this).html().trim("'"));//字體
});
$("#edui_fixedlayer").on("click","#edui106_content .edui-label.edui-listitem-label.edui-default",function () {
$("#edui105").find("p").html($(this).html().trim("'"));//字號
});
})
選擇字體蚁滋、字號時宿接，字體赘淮、字號相應(yīng)變化
- 編輯器內(nèi)文字部分獲得焦點后，字體睦霎，字號應(yīng)該為焦點處文字的字體拥知、字號；
ue.addListener("selectionchange",function () {
//字體碎赢、字號變化
$("#edui92").find("p").html(this.queryCommandValue('fontfamily').split(",")[0]);//字體
$("#edui105").find("p").html(this.queryCommandValue('fontsize').split(",")[0]);//字號
})
編輯器內(nèi)文字獲得焦點低剔，字體字號處理
（4）行間距
<div class="left lineHeight" id="edui67" title="行間距" onclick="$EDITORUI['edui67']._onArrowClick(); ">
<p><img src="@Html.SourceImageUrl("/images/personalHomepage/toolsbar-icon14.png")" width="18" height="17" /></p>
</div>
自定義工具欄-行間距調(diào)用命令
UEditor實例化時（見 “三、UEditor自定義工具欄-常規(guī)按鈕 JS實例化編輯器“”）可根據(jù)需求配置所需要的行間距肮塞，也可以不配置行間距襟齿，使用UEditor默認配置；’
//,lineheight:['1', '1.5','1.75','2', '3', '4', '5']
鑒于1倍行間距文字較密集枕赵，產(chǎn)品經(jīng)理要求行間距默認為1.5猜欺，實現(xiàn)的方式是改動源碼：
按此路徑“ueditor\ueditor.all.js“打開ueditor.all.js文件約6906行，添加“l(fā)ine-height:1.5em“,同理也可更改其他默認樣式拷窜；
注：默認1.5行間距开皿，則在編輯器初始化完之后，行間距應(yīng)該默認勾選1.5篮昧，處理方法如下：
ue.addListener("ready",function(ue) {
//行間距默認勾選1.5
var myUeditor=this;
$("#edui67").on("click",function () {
setTimeout(function(){ $("#edui68_body").css("margin-top","1px")},1);
if ($("#edui68_body .edui-state-checked").size()<=0 ) {
$("#edui70").addClass("edui-state-checked");
myUeditor.execCommand('lineheight','1.5');
}
})
})
自定義工具欄-默認勾選1.5行間距
（5）超鏈接
<a href="javascript:void(0);" class="left media link" id="edui135" onclick="return $EDITORUI['edui135']._onClick(event, this);" title="插入鏈接">
<img src="@Html.SourceImageUrl("/images/personalHomepage/toolsbar-icon15.png")" width="15" height="17" />
</a>
自定義工具欄-超鏈接調(diào)用命令
結(jié)語
本篇主要介紹富文本編輯器1.4.3版本自定義工具欄實現(xiàn)方法赋荆，探討的功能按鈕有加粗、斜體懊昨、居中對齊（居左對齊窄潭、居右對齊）、首行縮進常規(guī)按鈕酵颁，字體嫉你、字號、行間距涉及懸浮窗按鈕及超鏈接涉及彈層按鈕功能實現(xiàn)及一些細節(jié)處理躏惋；不足或錯誤之處幽污，歡迎探討與斧正。下一篇將介紹自定義工具欄插入圖片簿姨、音頻距误、視頻涉及彈層的個性化功能按鈕實現(xiàn)。
