1. 程式人生 > >Ueditor編輯器新增自定義按鈕

Ueditor編輯器新增自定義按鈕

首先在ueditor根目錄找到檔案ueditor.all.js,在最後大括號裡新增:

UE.registerUI('button', function(editor, uiName) {
   //註冊按鈕執行時的command命令,使用命令預設就會帶有回退操作
   editor.registerCommand(uiName, {
       execCommand: function() {
            setTimeout(function(){
            	alert('execCommand:' + uiName)
            }, 500);
            alert('execCommand:' + uiName)
       }
   });
   //建立一個button
   var btn = new UE.ui.Button({
       //按鈕的名字
       name: uiName,
       //提示
       title: "編輯器目前支援從word單點複製和從資料夾拖拽上傳圖片!",
       //新增額外樣式,指定icon圖示,這裡預設使用一個重複的icon
       cssRules: 'background-position: -340px 0;',
       //點選時執行的命令
       onclick: function() {
           //這裡可以不用執行命令,做你自己的操作也可
           editor.execCommand(uiName);
       }
   });
   //當點到編輯內容上時,按鈕要做的狀態反射
   editor.addListener('selectionchange', function() {
       var state = editor.queryCommandState(uiName);
       if (state == -1) {
           btn.setDisabled(true);
           btn.setChecked(false);
       } else {
           btn.setDisabled(false);
           btn.setChecked(state);
       }
   });
   //因為你是新增button,所以需要返回這個button
   return btn;
});