Компонент Draft's Editor имеет дополнительную опцию, называемую keyBindingFn
. Если вы назначите ему функцию, эта функция получит все события keyDown
. Теоретически вы можете делать все, что захотите, в этой функции, но его обязанность заключается в том, чтобы вернуть команду команды типа string, которая должна быть выполнена для определенного ключа (или комбинации клавиш). Это может выглядеть примерно так:
function keyBindingFn(e) {
if (e.key === 'Delete') {
return 'delete-me' // name this whatever you want
}
// This wasn't the delete key, so we return Draft's default command for this key
return Draft.getDefaultKeyBinding(e)
}
Editor
компонент также имеет другой необязательный реквизит называется handleKeyCommand
. Если для этой функции назначена функция, она получит все команды, выполняемые в редакторе. Это означает, что если вы использовали мой пример выше, вы получите команду «delete-me», когда будет нажата клавиша удаления. Это место для обработки этой команды.
function handleKeyCommand(command) {
if (command === 'delete-me') {
// Do what you want to here, then tell Draft that we've taken care of this command
return 'handled'
}
// This wasn't the 'delete-me' command, so we want Draft to handle it instead.
// We do this by telling Draft we haven't handled it.
return 'not-handled'
}
Чтобы уточнить, вы передать эти функции компонента редактора, как это:
<Editor
keyBindingFn={keyBindingFn}
handleKeyCommand={handleKeyCommand}
... // other props
/>
Вы можете прочитать больше об этом in the Draft docs.
Пожалуйста, добавьте более подробную информацию на ваш вопрос. – nmnsud