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

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 commands have observable properties: value and isEnabled. You can attach listeners 并在这些属性更改时做出反应：

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.
    }
} );

使用 CKEditor 5 查看 guide about using the external UI 以了解更多信息。

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

How to verify if clicked text is formatted?

reactjs

ckeditor

ckeditor5