Question

我想使用自己的自定义按钮代替默认工具栏。要以粗体显示选中的文本，我使用类似以下内容的方法：

<select>
  <component> // Notice extra component
    <option>
      <search>
    <option>
    ... more options

它工作正常。但是，当我单击未加粗文本时，我希望按钮为灰色，但是如果我单击一些粗体文本，则希望按钮为绿色。我不知道如何实现这一目标。我看到在原始的粗体按钮中有一些代码响应，但是我不知道该如何在我的情况下使用它：

<BoldButton onClick={this.onBoldClick} />

onBoldClick = () => {
    editor.execute('bold');
};

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

Answer 1

CKEditor 5 commands具有可观察的属性：value和isEnabled。您可以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，以了解更多信息。

如何验证点击的文字是否格式化？

1 个答案: