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

码蚁先生2024-03-07 20:08

我们接着上一节的示例内容，现在有如下需求，我们希望当我们按下某个按键时编辑器有所反应。这就需要我们对编辑器添加事件功能onKeyDown, 我们给 Editor添加事件：

SDocor.jsx

javascript 复制代码

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

javascript 复制代码

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;

当我们键入 &时就能看到界面上的变化了。有点意思是不是。