ckeditor change button icon dynamically

I am trying to write a plugin for ckeditor, like in the link below CKEditor Custom Plugins Button

the problem is, I want the button to change once I click it, and change back, so the users knows something happened. how can i change the path to the icon after the button is added? is there something like开发者_Python百科 editor.ui.editButton?

Thanks!

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

Where BUTTONNAME is all in small letters and pathtoimage is relative to html file.

To chance image path to relative to the plugin.js by using this.path. Important thing this.path should be outside the scope of function as shown below:

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

i have a dirty hack: (with jQuery)

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

Where Commandname the name of the Button is and this path is a var wich i initiate in the plugin with

var thisPath = this.path;