ckeditor动态更改按钮图标答案

【问题标题】：ckeditor change button icon dynamicallyckeditor动态更改按钮图标
【发布时间】：2010-01-03 05:23:53
【问题描述】：

我正在尝试为 ckeditor 编写插件，如下面的链接所示 CKEditor Custom Plugins Button

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

谢谢！

【问题讨论】：

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

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

var thisPath = this.path;

【讨论】：