Wie erstellt man benutzerdefinierte Tastenbelegungen in draft.js?

Question

Ich drücke CTRL+B => Ich möchte markierten Text fett.

---

Nützliche Links:

• http://facebook.github.io/draft-js/docs/advanced-topics-key-bindings.html#content - beschreibt, was keyBindingFn und handleKeyCommand tun.

• https://github.com/facebook/draft-js/blob/master/examples/draft-0-10-0/rich/rich.html - langes Beispiel.

• https://www.youtube.com/watch?v=0k9suXgCtTA - großes Video, das erklärt, wie man einen Knopf hinzufügt, der Kühnheit schaltet.

Answer 1

Wir brauchen zwei Stützen unserer <Editor/> weitergeben müssen:
keyBindingFn: Karten CTRL + some key bis zu einem gewissen Aktion Stachel
handleKeyCommand: wird diese Aktion String geben und entscheidet, was damit zu tun.

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} 
    /> 
} 

Wenn Sie etwas anderes als Inline-bold Text (RichUtils.toggleInlineStyle) möchten, können Sie RichUtils.toggleBlockType, RichUtils.toggleCode, etc verwenden.