鍵值綁定(翻譯)
Editor組件通過keyBindingFn為你的編輯器提供了靈活地自定義鍵值綁定漏设。
默認(rèn):
getDefaultKeyBinding默認(rèn)鍵值綁定函數(shù)。
因為draft框架嚴(yán)格控制DOM渲染和行為,基本編輯命令必須通過鍵值綁定系統(tǒng)捕獲和轉(zhuǎn)換休建。
getDefaultKeyBinding與已知命令DraftEditorCommand字符串os級別的編輯器相匹配,這個字符串對應(yīng)了組件處理的行為。
例如,Ctrl + Z(Win)和Cmd + Z(OSX)映射到“撤消”命令,然后交給處理程序執(zhí)行EditorState.undo()顷链。
定制:
你可以提供你自己的鍵值綁定函數(shù)來提供定制命令字符串入录。
建議你的函數(shù)使用getDefaultKeyBinding作為獲取定制失敗的選擇,這樣你可能受益于默認(rèn)的命令。
使用您的自定義命令字符串,您可以實現(xiàn)handleKeyCommand屬性功能,它允許您使用字符串映射到你想要的行為图焰。如果handleKeyCommand返回“處理”,被認(rèn)為是處理的命令。如果它返回“未處理”,被認(rèn)為是未處理的命令蹦掐。
例子
假設(shè)我們可以先預(yù)存一個myeditor-save的鍵值綁定命令
首先,讓我們定義鍵值綁定功能:
import {getDefaultKeyBinding, KeyBindingUtil} from 'draft-js';
const {hasCommandModifier} = KeyBindingUtil;
function myKeyBindingFn(e: SyntheticKeyboardEvent): string {
if (e.keyCode === 83 /* `S` key */ && hasCommandModifier(e)) {
return 'myeditor-save';
}
return getDefaultKeyBinding(e);
}
函數(shù)接收一個關(guān)鍵事件,我們檢查它是否符合我們的標(biāo)準(zhǔn):它必須是一個S鍵,(keycode83對應(yīng)鍵盤上的 S)并且它必須有一個命令修飾符,即在OSX里面是 cmd,其他的則為 ctrl 控制鍵技羔。
即 OSX 為 cmd+S ,WIN 為 ctrl+S,
如果命令是一個匹配,返回一個字符串的命令名稱。否則,使用默認(rèn)的鍵值綁定卧抗。
在我們的編輯器組件,我們可以利用命令通過handleKeyCommand屬性:
import {Editor} from "draft-js";
class MyEditor extends React.Component {
// ...
handleKeyCommand(command: string): DraftHandleValue {
if (command === "myeditor-save") {
// Perform a request to save your contents, set
// a new `editorState`, etc.
return "handled";
}
return "not-handled";
}
render() {
return (
<Editor
editorState={this.state.editorState}
handleKeyCommand={this.handleKeyCommand.bind(this)}
keyBindingFn={myKeyBindingFn}
...
/>
);
}
}
“myeditor-save”命令可用于我們的習(xí)慣行為,并返回“handled” 告訴編輯器命令已經(jīng)被處理了.
通過返回"not-handled"的情況下,默認(rèn)的命令能夠使用默認(rèn)處理行為藤滥。
