React富文本编辑器开发（二）

news/2024/7/27 7:24:24/文章来源:https://blog.csdn.net/zxmatline/article/details/136396095

我们接着上一节的示例内容，现在有如下需求，我们希望当我们按下某个按键时编辑器有所反应。这就需要我们对编辑器添加事件功能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;