如何为CKEditor自定义按钮设置开关状态

Question

我已经为CKEditor内联添加了一个自定义插件来执行粗体操作。 该插件按预期工作，但按钮的开/关状态不起作用。

执行命令时，其状态始终为TRISTATE_OFF 。

CKEDITOR.plugins.add( 'customBold', {
    requires: 'toolbar',
    icons: 'bold',
    hidpi: false, 
    init: function( editor ) {


        var boldCommand = {
            exec: function( editor ) {  
                document.execCommand('bold', false, null);              
            }
        }

        editor.addCommand( 'bold', boldCommand );   

        editor.ui.addButton && editor.ui.addButton( 'Bold', {
                label:  'bold',
                command: 'bold',
                toolbar: 'basic,10'
        });    

       editor.setKeystroke( [
            [ CKEDITOR.CTRL + 66 /*B*/, 'bold' ]                
       ]);
    }
});

当用户选择粗体文本时，我想在工具栏中切换粗体样式。

Answer 1

您需要调用command.setState方法，该方法将设置命令的状态，然后自动影响相关按钮的状态。

但是，您需要知道何时调用该方法（当状态更改时）。 像basicstyle插件一样的CKEditor插件使用CKEditor的样式系统 ，让他们轻松收听样式状态变化：

editor.attachStyleStateChange( style, function( state ) {
    !editor.readOnly && editor.getCommand( commandName ).setState( state );
} );

但是，您尝试使用本机命令，我强烈建议不要这样做。 CKEditor实现自己的样式系统和自己的命令并非巧合。

Answer 2

我正在回答这个问题，因为当我在寻找如何将样式应用到工具栏上的CKEditor自定义插件按钮时，这个结果不断出现。

这最终变得相当简单，虽然不是特别优雅。

目前，我自己处理CKEditor按钮（在plugin.js文件之外）。 这是因为我正在使用CKEditor动态创建编辑器实例，它似乎不太适合做，我经常需要覆盖函数。

以下是我在myplugin按钮操作的编辑器中将样式应用于“活动”按钮的方法：

//Catch the initial click
$('.parent_element').on('click', '.cke_button__myplugin', function(){ 
    //Apply a gradiant style to the button
    $('.cke_button__myplugin').css({'background':' radial-gradient(#FFF, #6E6E6E)'})
    //Logic to handle button click 

}）;

这样，您只需将样式应用于按钮，而无需切换实际的button.png