如何设置CKEditor自定义按钮的On Off状态

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将设置命令状态的方法，然后自动影响相关按钮的状态。

但是，您需要知道何时调用该方法（当状态更改时）。CKEditor 的插件（如basicstyle插件）使用 CKEditor 的样式系统，使它们可以轻松监听样式状态更改：

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

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