富文本編輯器UEditor自定義工具欄（三、自定義工具欄功能按鈕圖標及工具欄樣式簡單修改）

 

 導讀

富文本編輯器UEditor提供豐富了定制配置項，如果想設置個性化的工具欄按鈕圖標有無辦法呢？答案是肯定的！前兩篇博文簡要介紹了通過將原工具欄隱藏，在自定義的外部按鈕上，調用UEditor各命令實現與原按鈕相同的功能。本篇將介紹更為簡單粗暴的方式。

傳送門

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

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

 一、效果圖

自定義工具欄功能按鈕圖標效果如下

 

二、自定義工具欄按鈕圖標實現

1.增加自定義按鈕

(1)打開文件 ueditor/themes/default/css/ueditor.css，添加樣式 .edui-for-customimage

 

/*增加自定義圖片圖標*/
.edui-default .edui-for-customimage .edui-icon {
background-image: url('../images/customicons/ne_toolsicon17.png') !important;
background-repeat:no-repeat;
}

 其中 background-image 屬性，圖片路徑如下圖，customicons文件夾下為功能按鈕的圖標，建議圖標大小為20*20px，ne_toolsicon17.png 為自定義按鈕的圖標。

 

（2）ueditor.config.js文件中的toolbars數組，增加一個“customimage”配置

, toolbars: [[
            ......,print', 'preview', 'searchreplace', 'help'
            //, 'drafts' 從草稿箱加載
            //新增自定義按鈕
            ,'customimage'
        ]]

//自定義按鈕鼠標移入提示
        ,labelMap:{
            'customimage':'插入圖片'
        }

（3）綁定按鈕點擊事件

(a)打開ueditor.all.js文件或新建js文件
仿照 首行縮進 腳本綁定點擊事件；

/**
 * 縮進
 * @command indent
 * @method execCommand
 * @param { String } cmd 命令字符串
 * @example
 * ```javascript
 * editor.execCommand( 'indent' );
 * ```
 */
UE.commands['indent'] = {
    execCommand : function() {
         var me = this,value = me.queryCommandState("indent") ? "0em" : (me.options.indentValue || '2em');
         me.execCommand('Paragraph','p',{style:'text-indent:'+ value});
    },
    queryCommandState : function() {
        var pN = domUtils.filterNodeList(this.selection.getStartElementPath(),'p h1 h2 h3 h4 h5 h6');
        return pN && pN.style.textIndent && parseInt(pN.style.textIndent) ?  1 : 0;
    }

};

(b)js腳本執行
也可以在編輯器初始化頁面，ueditor ready事件下，為此按鈕綁定事件；

$("#edui74").on("click",function () {
           ///todo:腳本
})

其中edui74為按鈕元素的id

 

 2、修改原功能按鈕圖標為新圖標

（1）打開themes/default/css/ueditor.css,在原樣式下修改

以撤銷功能按鈕為例，行號大約535處，將如下樣式修改成目標樣式。

修改前：

.edui-default .edui-for-undo .edui-icon {
    background-position: -160px 0;
 }

修改后：

.edui-default .edui-for-undo .edui-icon {
    /*background-position: -160px 0;*/
    background-image: url("../images/customicons/ne_toolsicon2.png") !important;
    background-repeat: no-repeat;
}

 

（2）按鈕樣式默認顯示為B（加粗）的問題解決

.edui-default .edui-for-customimage .edui-icon {

}

添加自定義按鈕customimage默認為B（加粗）樣式，路徑下themes/default/images/icons.png有一張圖片，打開此圖就會明白，工具欄所有按鈕圖標均在此圖中。每個按鈕通過偏移量來定位按鈕圖標，增加新的按鈕建議通過 background-image 屬性定義樣式。

添加了background-image屬性發現有些情況下還是有問題，可以在background-image 屬性添加 !important 來解決圖標無效果，仍舊顯示B（加粗）圖標樣式的問題。

三、其他一些樣式微調

1.修改圖標間距

.edui-default .edui-toolbar .edui-combox {
    margin: 1px;/*圖標間距不滿意可以調整 */
}

2.修改正文與工具欄的距離

 ue.addListener("ready", function () {
        $("#ueditor_0").contents().find("body").css({ "padding-top": "5px" });//正文與工具欄間距
    })

其中ue為實例化出來的UEditor變量

總結

本文簡單介紹了通過更改UEditor源碼來增加或修改功能按鈕圖標樣式及編輯器一些樣式微調的方法，有疏漏之處或有更好方法者，請不吝賜教。