javascript - 如何为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 的 styles system这让他们easily listen关于样式状态变化:

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

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