如何在draft.js中創建自定義鍵綁定？

Question

我按CTRL+B =>我想要粗體文字。

---

相關鏈接：

• http://facebook.github.io/draft-js/docs/advanced-topics-key-bindings.html#content - 說明什麼keyBindingFn和handleKeyCommand做。

• https://github.com/facebook/draft-js/blob/master/examples/draft-0-10-0/rich/rich.html - 冗長的例子。

• https://www.youtube.com/watch?v=0k9suXgCtTA - 偉大的視頻解釋如何添加一個按鈕，將切換膽量。

Answer 1

我們需要將兩個道具傳遞給我們的<Editor/>：
keyBindingFn：映射CTRL + some key一些行動刺痛
handleKeyCommand：被傳遞這個操作字符串並決定如何處理它。

import React from 'react'; 

import { 
    Editor, EditorState, 
    RichUtils, getDefaultKeyBinding 
} from 'draft-js'; 


class Problem extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { editorState: EditorState.createEmpty() }; 
    } 

    // this function maps keys we press to strings that represent some action (eg 'undo', or 'underline') 
    // then the this.handleKeyCommand('underline') function gets called with this string. 
    keyBindingFn = (event) => { 
    // we press CTRL + K => return 'bbbold' 
    // we use hasCommandModifier instead of checking for CTRL keyCode because different OSs have different command keys 
    if (KeyBindingUtil.hasCommandModifier(event) && event.keyCode === 75) { return 'bbbold'; } 
    // manages usual things, like: 
    // Ctrl+Z => return 'undo' 
    return getDefaultKeyBinding(event); 
    } 

    // command: string returned from this.keyBidingFn(event) 
    // if this function returns 'handled' string, all ends here. 
    // if it return 'not-handled', handling of :command will be delegated to Editor's default handling. 
    handleKeyCommand = (command) => { 
    let newState; 
    if (command === 'bbbold') { 
     newState = RichUtils.toggleInlineStyle(this.state.editorState, 'BOLD'); 
    } 

    if (newState) { 
     this.setState({ editorState: newState }); 
     return 'handled'; 
    } 
    return 'not-handled'; 
    } 

    render =() => 
    <Editor 
     editorState={this.state.editorState} 
     onChange={(newState) => this.setState({ editorState: newState })} 
     handleKeyCommand={this.handleKeyCommand} 
     keyBindingFn={this.keyBindingFn} 
    /> 
} 

如果你想比直列粗體文字（RichUtils.toggleInlineStyle）其他的東西，你可以用RichUtils.toggleBlockType，RichUtils.toggleCode，etc。