ckeditor动态更改按钮图标

Question

我正在尝试为 ckeditor 编写一个插件，如下面的链接所示 CKEditor自定义插件按钮

问题是，我希望按钮在我单击它，然后更改回来，以便用户知道发生了什么事。添加按钮后如何更改图标的路径？有类似 editor.ui.editButton 的东西吗？

谢谢！

Answer 1

$('.cke_button__BUTTONNAME_icon').css('background-position', '0 0').css('background-image', 'url(pathtoimage< /strong>)').css('背景重复','不重复');


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

Answer 2

我有一个肮脏的黑客：（使用jQuery）

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

其中Commandname是按钮的名称，这个路径是我在插件中启动的一个var

var thisPath = this.path;