富文本編輯器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.實例化編輯器

 <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>"//默認內容
        ,elementPathEnabled: false//元素路徑
        ,wordCount: false//字數統計
        ,enableAutoSave: false //自動保存
        ,autoSyncData: false//自動同步編輯器要提交的數據
        ,autoFloatEnabled:false//工具欄懸浮
        ,enableContextMenu:false //右鍵菜單
        ,lineheight:['1', '1.5','1.75','2', '3', '4', '5']//行高
        ,pasteplain:true //是否默認為純文本粘貼
        ,catchRemoteImageEnable:false//遠程圖片抓取關閉
        ,imagePopup:false//圖片操作的浮層開關，默認打開

    })

說明：編輯器有很多可自定義的參數項，在實例化的時候可以傳入給編輯器，這樣不必改動源碼，不影響其他地方的調用（此處實例化為滿足個性化需求，所傳參數較多）；

（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造成影響；

//ue為實例化出來的UEditor變量
ue.addListener("ready",function(ue) {
        //編輯器准備就緒后會觸發該事件
        $(".edui-default .edui-editor-toolbarbox").css("display","none");
    })
 ue.addListener("langReady",function () {
        //語言加載完成會觸發該事件
        $(".edui-default .edui-editor-toolbarbox").css("display","none");
    })

 

<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>

注：其中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“，實現調用命令如下：

<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>

注：功能按鈕必須要有id屬性，字體顏色懸浮窗會根據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>

（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>

本示例中，通過調用了字體、字號相關命令來實現，也可以通過切圖人員給的相關腳本來實現。

此外還需要處理的情況：

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

ue.addListener("ready",function(ue) {
        //edui93_content元素為動態生成，因此需要使用以下方法綁定事件
        $("#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("'"));//字號
        });
    })

• 編輯器內文字部分獲得焦點后，字體，字號應該為焦點處文字的字體、字號；

 ue.addListener("selectionchange",function () {
        //字體、字號變化
        $("#edui92").find("p").html(this.queryCommandValue('fontfamily').split(",")[0]);//字體
        $("#edui105").find("p").html(this.queryCommandValue('fontsize').split(",")[0]);//字號     
})

（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>

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，處理方法如下：

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');
            }
        })
    })

（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>

 

結語

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