我们接着上一节的示例内容,现在有如下需求,我们希望当我们按下某个按键时编辑器有所反应。这就需要我们对编辑器添加事件功能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}>
<Editable
onKeyDown={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}>
<Editable
onKeyDown={event => {
console.log(event.key)
if (event.key === '&') {
event.preventDefault()
editor.insertText('and')
}
}}
/>
</Slate>
)
}
export default SDocer;
当我们键入 &
时就能看到界面上的变化了。有点意思是不是。