CKEditor的變化按鈕圖標動態

Question

我想在鏈接編寫CKEditor的一個插件，像下面 CKEditor Custom Plugins Button

的問題是，我希望按鈕換一次我點擊它，並改變回來，所以用戶知道發生了什麼。如何在添加按鈕後將路徑更改爲圖標？有沒有像editor.ui.editButton？

謝謝！

Answer 1

我有一個骯髒的黑客：（用jQuery）

$('.cke_button_COMMANDNAME.cke_icon').css('backgroundImage', 'url('+thisPath+'imageOff.gif)'); 

哪裏的CommandName按鈕的名稱是和這條道路是一個變種至極我在插件啓動與

var thisPath = this.path; 

Answer 2

$('.cke_button__BUTTONNAME_icon').css('background-position', '0 0').css('background-image', 'url(pathtoimage)').css('background-repeat','no-repeat');

其中BUTTONNAME全部用小寫字母和pathtoimage是相對於html文件。

通過使用this.path來機會圖像路徑相對於plugin.js。重要的是，this.path應該超出如下所示的功能範圍：

var _p = this.path;

 editor.addCommand('toggleAutocorrect', 
     { 
      exec : function() 
       { 
         $('.cke_button__toggleautocorrect_icon').css('background-position', '0 0').css('background-image', 'url("' + _p + '/images/autocorrectOff.png")').css('background-repeat','no-repeat'); 
       } 
       } 
     }); 

     editor.ui.addButton('ToggleAutocorrect', 
     { 
       label: 'Toggle Autocorrect', 
       command: 'toggleAutocorrect', 
       icon: this.path + 'images/toggleAutocorrect.png' 
     });