我們在在之前的文章中講了 百度ueditor富文字 的 配置和初始化的方法。

我們可以給它配置更多的外掛，全部外掛可參考官網:

如果官網提供的外掛仍不能滿足我們的需要時，則可以自定義外掛按鈕。

比如 我們這裡可以 自定義一個按鈕 水印  一點選後就在當前位置 新增 我們的 水印內容。這個功能是需要寫JS方法的，也就是隻要JS能實現的功能，我們都可以成自定義外掛處理。

詳細步驟如下:

第一步 新增按鈕描述

找到ueditor.config.js檔案中的toolbars陣列，增加一個“watermark”字串，然後找到labelMap陣列，對應著新增一個labelMap，labelMap用於滑鼠移上按鈕時的提示。

如果不想在ueditor.config.js檔案中新增 ，也可以在初始化時 新增，我這裡在初始化時新增如下:

$(document).ready(
        function () {
            $(".ueditorFlag").each(function () {
                //例項化編輯器
                var ue = UE.getEditor(this.id, {
                    pasteplain: true, /* 純文字貼上 */
                    toolbars: [['watermark','|', 
                        'fullscreen', 'source', '|', 'undo', 'redo', '|',
                        'bold', 'italic', 'underline', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', /*'selectall', 'cleardoc',*/ '|',
                        'rowspacingtop', 'rowspacingbottom', 'lineheight', '|', 'fontsize', '|', 'indent', '|',
                        'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', '|',
                        'link', 'unlink', /*'anchor'*/, '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
                        'insertimage', 'preview', '|', 'foreword', 'subhead', 'body', 'caption', 'stress', 'quote'
                    ]],
                    labelMap:{
                    	'watermark':'新增水印連結'
                    }
                });
            });
        }
)
 

第二步 新增按鈕命令

找到你所引用的ueditor.all.js檔案中的btnCmds陣列，在其中同樣增加一個"watermark"字串。

首先需要確定自己引用的ueditor.all.js檔案。

如果引用的是 壓縮過的 ueditor.all.min.js檔案，則需要修改ueditor.all.js檔案後壓縮一遍，把新的ueditor.all.min.js檔案內容替換進去。

這裡為了方便 我們直接引用 ueditor.all.js檔案，如下:

<script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.all.js"></script>
 

開啟ueditor.all.js檔案檔案，找到btnCmds陣列，增加watermark字串。

 //為工具欄新增按鈕，以下都是統一的按鈕觸發命令，所以寫在一起
    var btnCmds = ['watermark','undo', 'redo', 'formatmatch',
        'bold', 'italic', 'underline', 'fontborder', 'touppercase', 'tolowercase',
        'strikethrough', 'subscript', 'superscript', 'source', 'indent', 'outdent',
        'blockquote', 'pasteplain', 'pagebreak',
        'selectall', 'print','horizontal', 'removeformat', 'time', 'date', 'unlink',
        'insertparagraphbeforetable', 'insertrow', 'insertcol', 'mergeright', 'mergedown', 'deleterow',
        'deletecol', 'splittorows', 'splittocols', 'splittocells', 'mergecells', 'deletetable', 'drafts'];

這樣我們的按鈕就新增好了。

清空快取重新整理下頁面吧！工具欄的對應位置是否出現了一個自己定義的按鈕呢？如下圖所示：

第三步 修改樣式

使用新圖示

由於此時未設定對應按鈕的圖片樣式，所以會顯示預設的“B”字元。要想讓其顯示成自己需要的圖示樣式，可以修改樣式檔案。

找到themes/default/css/ueditor.css檔案，在最後增加一條樣式定義:

.edui-default .edui-toolbar .edui-for-watermark .edui-icon {
    background-image: url("../images/foreword.png");
}

這裡 foreword.png圖片是我們新增的一張圖片。如圖:

路徑如圖:

.edui-for-watermark 這裡的watermark需要修改成 跟 自定義外掛的名稱相同，ueditor會自動對應起來。

<link href="/ueditor/themes/default/css/ueditor.css" rel="stylesheet" />

最終效果:

使用ueditor已有圖示

我們在F12的開發者模式中看到 帶有 .edui-icon樣式的工具圖示預設都是使用的 ../images/icons.png。

我們在images中檢視圖片icon.png。發現這張圖片中包含了很多工具圖示。如下:

然後通過 css中的設定位移可以使用圖片上的圖示。

比如我們的 .edui-for-watermark ,設定位移如下:

.edui-default .edui-toolbar .edui-for-watermark .edui-icon {
   background-position: -480px -40px;
}

第四步 新增命令具體操作

當我們點選按鈕時發現沒有反應，其實在第二步完成後ueditor已經為我們將這個按鈕的點選事件繫結好了，只不過是這個點選方法是空的而已，現在就需要我們自己去重寫這個點選方法了。


在頁面引用的ueditor.all.js檔案任意空白位置新增如下方法（或者在初始化的頁面 js中新增）: 

UE.commands['watermark'] = {
	    execCommand : function(){
	   this.execCommand('insertHtml', '<a href="http://blog.csdn.net/zzq900503">張小凡的水印</a>'); return true; 
	    },
		queryCommandState:function(){
		
		}
	};

點選後會在編輯框自動加入 水印文字連結，當然也可以換成圖片，想要實現什麼功能 自己可以使用js實現。

效果如圖: