第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定

Draft 文檔翻譯 - 高級(jí)主題 - Key 綁定

標(biāo)簽:
React.JS
Key 绑定

编辑器组件提供了灵活性,可以通过keyBindingFn支持为编辑器定义自定义键绑定。这允许您将键命令与编辑器组件中的行为相匹配。

默认

默认的按键绑定函数是 getDefaultKeyBinding

由于Draft 框架保存对DOM的渲染和行为的严格控制。

基础的编辑器命令必须 捕获和路由通过 key绑定系统。

getDefaultKeyBinding将已知的操作系统级编辑器命令映射到DraftEditorCommand字符串,然后对应于组件处理程序中的行为。

例如,Ctrl + Z(Win)和Cmd + Z(OSX)映射到“撤销”命令,然后路由我们的处理程序执行一个 EditorState.undo()。

定制

您可以提供自己的键绑定功能来提供自定义命令字符串。

建议您的函数使用getDefaultKeyBinding作为通过的情况,这样您的编辑器可能会受益于默认命令。

使用您的自定义命令字符串,您可以实现handleKeyCommand prop函数,该函数允许您将该命令字符串映射到所需的行为。如果handleKeyCommand返回'processed',则该命令被视为处理。 如果它返回“未处理”,则命令将通过。

举例

假设我们有一个编辑器应该有一个“保存”机制来定期将您的内容作为草稿复制到服务器上。

首先,我们来定义我们的键绑定功能:

import {getDefaultKeyBinding, KeyBindingUtil} from 'draft-js'
const {hasCommandModifier} = keyBindingUtil;

function myKeyBindingFn(e: SyntheticKeyBoardEvent): string {
    if (e.keyCode ===83 && hasCommandModifier(e)) {
        return 'myeditor-save';
    }
    return getDefaultKeyBinding(e)
}

我们的函数接收到一个关键事件,我们检查它是否符合我们的标准:它必须是一个S键,它它必须有一个 Ctrl,即OSX的命令键,否则是控制键。

如果命令是匹配的,则返回一个命名该命令的字符串。 否则,通过默认键绑定。

在我们的编辑器组件中,我们可以通过handleKeyCommand prop来使用命令:

import {Editor} from 'draft-js';
class MyEditor extends React.Component {
    constructor(props) {
        super(props);
        this.handleKeyCommand = this.handleKeyCommand.bind(this);
    }

    handleKeyCommand(command: string): DraftHandleValue{
        if (command === 'myeditor-save'){
            return 'handle';
        }
        return 'not-handle';
    }

    render() {
        return (
            <Editor
                editorState={this.state.editorState}
                handleKeyCommand={this.handleKeyCommand}
                keyBindingFn={myKeyBindingFn}
            />
        )
    }
}

“myeditor-save”命令可以用于我们的自定义行为,并且返回“handle”指示编辑器已经处理了命令,并且不需要更多的工作。

通过在所有其他情况下返回“未处理”,默认命令可以通过默认处理程序行为。

點(diǎn)擊查看更多內(nèi)容
TA 點(diǎn)贊

若覺得本文不錯(cuò),就分享一下吧!

評(píng)論

作者其他優(yōu)質(zhì)文章

正在加載中
  • 推薦
  • 評(píng)論
  • 收藏
  • 共同學(xué)習(xí),寫下你的評(píng)論
感謝您的支持,我會(huì)繼續(xù)努力的~
掃碼打賞,你說多少就多少
贊賞金額會(huì)直接到老師賬戶
支付方式
打開微信掃一掃,即可進(jìn)行掃碼打賞哦
今天注冊(cè)有機(jī)會(huì)得

100積分直接送

付費(fèi)專欄免費(fèi)學(xué)

大額優(yōu)惠券免費(fèi)領(lǐng)

立即參與 放棄機(jī)會(huì)
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)

舉報(bào)

0/150
提交
取消