如何验证单击的文本是否已格式化

Question

我想使用自己的自定义按钮而不是默认工具栏。 为了加粗选定的文本，我使用如下内容：

<BoldButton onClick={this.onBoldClick} />
onBoldClick = () => {
    editor.execute('bold');
};

而且它工作正常。但是当我单击未加粗的文本时，我希望我的按钮是灰色的，但是如果我单击一些粗体文本，我希望按钮是绿色的。我不知道我怎样才能做到这一点。我看到在原始粗体按钮中有一些代码响应，但我不知道如何在我的情况下使用它：

view.bind( 'isOn', 'isEnabled' ).to( command, 'value', 'isEnabled' );
this.listenTo( view, 'execute', () => editor.execute( BOLD ) );

任何想法，我该如何处理？

Answer 1

CKEditor 5 命令具有可观察的属性：value 和 isEnabled 。您可以附加侦听器并在这些属性更改时做出反应：

const command = editor.commands.get( 'bold' );
command.on( 'change:isEnabled', () => {
    if ( command.isEnabled ) {
        // Make the button enabled.
    } else {
        // Make the button disabled.
    }
} );
command.on( 'change:value', () => {
    if ( command.value ) {
        // Make the button green.
    } else {
        // Make the button gray.
    }
} );

查看有关将外部 UI 与 CKEditor 5 配合使用的指南，了解更多信息。