我們接著上一節的示例內容，現在有如下需求，我們希望當我們按下某個按鍵時編輯器有所反應。這就需要我們對編輯器添加事件功能onKeyDown, 我們給 Editor添加事件：
SDocor.jsx
import { useState } from 'react';
import { createEditor } from 'slate';
import { Slate, withReact, Editable } from 'slate-react';import { initialValue } from './_configure';function SDocer() {const [editor] = useState(() => withReact(createEditor()));return (<Slate editor={editor} initialValue={initialValue}><EditableonKeyDown={event => {console.log(event.key)}}/></Slate>)
}export default SDocer;
現在看控制臺的打印結果，能捕獲到每一次的按鍵值。當然這肯定不是我們想要的，我們想要的是有一個實用的功能。比如，當按下 &鍵時在文本中插入 and單詞。修改如下：
SDocer.jsx
import { useState } from 'react';
import { createEditor } from 'slate';
import { Slate, withReact, Editable } from 'slate-react';import { initialValue } from './_configure';function SDocer() {const [editor] = useState(() => withReact(createEditor()));return (<Slate editor={editor} initialValue={initialValue}><EditableonKeyDown={event => {console.log(event.key)if (event.key === '&') {event.preventDefault()editor.insertText('and')}}}/></Slate>)
}export default SDocer;
當我們鍵入 &時就能看到界面上的變化了。有點意思是不是。
)
