Ueditor 自定義按鈕

第一步：找到ueditor文件夾下的ueditor.config.js下toolbars參數，新增一個字符串showmsg，同時新增一個labelMap用於鼠標移入顯示自定義提示信息、

   //工具欄上的所有的功能按鈕和下拉框，可以在new編輯器的實例時選擇自己需要的從新定義
        , toolbars: [[
            ......,print', 'preview', 'searchreplace', 'help'
            //, 'drafts' 從草稿箱加載
            //新增自定義按鈕
            ,'showmsg'
        ]]
        
        //自定義按鈕鼠標移入提示
        ,labelMap:{
        	'showmsg':'顯示提示信息'
        }

第二步：找到ueditor文件夾下的ueditor.all.js的btnCmds數組，添加字符串'showmsg'

這個時候刷新頁面就可以在help按鈕后面新增了一個按鈕，但是按鈕的圖標顯示的是B（默認的樣式）

第三步：在顯示出來按鈕后，我們發現按鈕的圖標不是我們想要的，然后我們找到ueditor文件夾下的themes文件夾下的default文件夾下的css文件夾下的ueditor.css,在文件的末尾加上如下css：

.edui-for-showmsg .edui-icon{
	background-position:-200px -40px;
}

這時候再刷新頁面就發現圖標已經換掉了，這里要解釋下就是圖標都是使用themes/default/images/icons.png這個圖片文件通過偏移量來選擇圖標的，如果有自定義圖標，只需要將制作好的圖標加入到icons.png中，然后設置偏移量就可以了。

第四步：當我們點擊按鈕時發現沒有反應，其實在第二步完成后ueditor已經為我們將這個按鈕的點擊事件綁定好了，只不過是這個點擊方法是空的而已，現在就需要我們自己去重寫這個點擊方法了。首先在ueditor文件夾下定義一個myplugins的文件夾，然后新建一個showmsg.js文件，showmsg文件內容如下：

UE.commands['showmsg'] = {
    execCommand : function(){
        var imgs = this.document.getElementsByTagName("img");
        for(var i= 0,img;img = imgs[i++];){
            img.setAttribute("border",2);
            img.setAttribute("width","100");
            img.setAttribute("height","100");
        }
    },
	queryCommandState:function(){
	     var images = this.document.getElementsByTagName("img" );
	     for(var i=0;i<$(images).length;i++){
	     	if($(images[i]).css("width")!="100px"){
	     		return 0;	 //如果找到寬度不為100的圖片，則返回0，代表當前按鈕可以點擊
	     	}
	     }
	     return -1;           //否則返回-1，告訴編輯器將當前按鈕置灰
	}
};

execComman 按鈕點擊時候要處理的信息，我寫的是將所有的圖片的border設為2，寬度和高都設置為100

queryCommandState 方法是指當編輯器獲取焦點時要處理的事，這里就是遍歷所有已上傳的圖片文件，如果編輯器中存在寬度不為100px的圖片，則讓當前按鈕可點擊，否則return -1；表示將按鈕置灰不可點擊