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' 
     });