我正在尝试为ckeditor编写插件,如下面的链接所示 CKEditor Custom Plugins Button
问题是,我希望按钮一旦点击就改变,然后改回来,这样用户就知道发生了什么事。如何在添加按钮后更改图标的路径?有什么像editor.ui.editButton?
谢谢!
答案 0 :(得分: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'
});
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'
});
答案 1 :(得分:1)
我有一个肮脏的黑客:(使用jQuery)
$('.cke_button_COMMANDNAME.cke_icon').css('backgroundImage', 'url('+thisPath+'imageOff.gif)');
其中Commandname是Button的名称,这个路径是我在插件中启动的var
var thisPath = this.path;