button - ckeditorはボタンアイコンを動的に変更します

Question

CKEditor カスタム プラグイン ボタンの下のリンクのように、ckeditor 用のプラグインを作成しようとしています。

問題は、ボタンをクリックすると変更され、元に戻るようにして、ユーザーが何かが起こったことを認識できるようにすることです。ボタンを追加した後にアイコンへのパスを変更するにはどうすればよいですか? editor.ui.editButton のようなものはありますか?

ありがとう！

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