Блог

Я хочу использовать свои собственные кнопки вместо панели инструментов по умолчанию. Для выделенного жирным шрифтом текста я использую что-то вроде этого:

 <BoldButton onClick={this.onBoldClick} />

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

И это работает нормально. Но когда я нажимаю на выделенный текст, я хочу, чтобы моя кнопка была серой, но если я нажимаю на какой-то выделенный жирным шрифтом текст, я хочу, чтобы кнопка была зеленой. Я понятия не имею, как я могу этого добиться. Я вижу, что в оригинальной выделенной жирным шрифтом кнопке есть какой-то фрагмент ответа кода для этого, но я не знаю, как я могу использовать его в моем случае:

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

Есть идеи, как я могу подойти к этому?

Команды 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.
    }
} );
  

Ознакомьтесь с руководством по использованию внешнего пользовательского интерфейса с CKEditor 5, чтобы узнать больше.