導(dǎo)讀：UEditor 是由百度「FEX前端研發(fā)團(tuán)隊」開發(fā)的所見即所得富文本web編輯器，功能強(qiáng)大，可定制，是一款優(yōu)秀的國產(chǎn)在線富文本編輯器，編輯器內(nèi)可插入圖片、音頻、視頻等。

一、UEditor自定義工具欄效果圖如下：

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xùn)

二、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.實例化編輯器

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xùn) Html部分

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xù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“；

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xùn)

 注：此種方法在頁面加載時，UEditor自帶工具欄不會出現(xiàn)閃現(xiàn)消失的情況；

（2）通過前臺JS配置及JS腳本控制工具欄的隱藏，避免對其他地方引用UEditor造成影響；

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xùn) JS隱藏UEditor工具欄

 

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xùn) 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')；

  • 首行縮進(jìn) ue.execCommand('indent')；

四、UEditor自定義工具欄-非常規(guī)按鈕

加粗、斜體、下劃線、居中對齊、首行縮進(jìn)等功能按鈕可直接調(diào)用UEditor對應(yīng)相關(guān)命令，但涉及懸浮窗、彈層的功能按鈕則需要特殊處理。

（1）字體顏色

 大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xùn)

自定義工具欄-字體顏色效果圖

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xùn)

工具欄字體顏色功能按鈕源碼

  • 查看字體顏色對應(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)用命令如下：

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xùn) 自定義工具欄-字體顏色調(diào)用命令

注：功能按鈕必須要有id屬性，字體顏色懸浮窗會根據(jù)id來定位懸浮窗位置，沒有id，字體顏色懸浮窗位置會不正確；

（2）背景色

原理同字體顏色

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xùn) 自定義工具欄-背景色調(diào)用命令

（3）字體、字號

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xùn)

自定義工具欄-字體效果圖

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xùn) 自定義工具欄-字體、字號調(diào)用命令

本示例中，通過調(diào)用了字體、字號相關(guān)命令來實現(xiàn)，也可以通過切圖人員給的相關(guān)腳本來實現(xiàn)。

此外還需要處理的情況：

  • 選擇字體、字號后，字體、字號功能按鈕顯示的字體、字號相應(yīng)變化；

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xùn) 選擇字體、字號時，字體、字號相應(yīng)變化

  • 編輯器內(nèi)文字部分獲得焦點后，字體，字號應(yīng)該為焦點處文字的字體、字號；

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xùn) 編輯器內(nèi)文字獲得焦點，字體字號處理

（4）行間距

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xùn)

自定義工具欄-行間距效果圖

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xùn) 自定義工具欄-行間距調(diào)用命令

UEditor實例化時（見 “三、UEditor自定義工具欄-常規(guī)按鈕 JS實例化編輯器“”）可根據(jù)需求配置所需要的行間距，也可以不配置行間距，使用UEditor默認(rèn)配置；’

//,lineheight:['1', '1.5','1.75','2', '3', '4', '5']

鑒于1倍行間距文字較密集，產(chǎn)品經(jīng)理要求行間距默認(rèn)為1.5，實現(xiàn)的方式是改動源碼：

按此路徑“ueditor\ueditor.all.js“打開ueditor.all.js文件約6906行，添加“l(fā)ine-height:1.5em“,同理也可更改其他默認(rèn)樣式；

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xùn)

自定義工具欄-行間距默認(rèn)1.5源碼修改

注：默認(rèn)1.5行間距，則在編輯器初始化完之后，行間距應(yīng)該默認(rèn)勾選1.5，處理方法如下：

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xùn) 自定義工具欄-默認(rèn)勾選1.5行間距

（5）超鏈接

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xùn)

自定義工具欄-超鏈接效果圖

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xùn) 自定義工具欄-超鏈接調(diào)用命令

 

結(jié)語

本篇主要介紹富文本編輯器1.4.3版本自定義工具欄實現(xiàn)方法，探討的功能按鈕有加粗、斜體、居中對齊（居左對齊、居右對齊）、首行縮進(jìn)常規(guī)按鈕，字體、字號、行間距涉及懸浮窗按鈕及超鏈接涉及彈層按鈕功能實現(xiàn)及一些細(xì)節(jié)處理；不足或錯誤之處，歡迎探討與斧正。下一篇將介紹自定義工具欄插入圖片、音頻、視頻涉及彈層的個性化功能按鈕實現(xiàn)。

http://www.cnblogs.com/EvanFan/p/7206793.html