CKEditor 使用 useState() 在 NextJS 中显示文本

Question

大家，

我正在尝试在我的 NextJS 项目中实现 CKEditor。

但是我有一个问题，我无法显示我在另一个 div 中编写的文本。

我每次总是遇到错误，我是 NextJS 的新手，所以我很难过。

这是我的组件的代码：

import React, {useState, useEffect, useRef} from 'react';

function Article() {

  const editorRef = useRef()
  const [editorLoader, setEditorLoaded] = useState(false)
  const {CKEditor, ClassicEditor} = editorRef.current || {}
  const [data, setData] = useState('')

  useEffect(() => {
    editorRef.current = {
      CKEditor: require('@ckeditor/ckeditor5-react'),
      ClassicEditor: require('@ckeditor/ckeditor5-build-classic')
    }
    setEditorLoaded(true)
  }, [])


  function onEditorChange(evt) {
    setData(evt.editor.getData())
  }


  return editorLoader ? (
    <div>
      <p style={{display: 'block'}}>{data}</p>
      <CKEditor
        editor={ClassicEditor}
        data={data}
        onChange={onEditorChange}
      />
    </div>
  ) : (
    <div>Chargement...</div>
  )
}

export default Article

以及每次尝试更改文本时出现的错误：

CKEditorError: Cannot read property 'getData' of undefined

onEditorChange [as onChange]
./components/news/Article.js:20
  17 | 
  18 | 
  19 | function onEditorChange(evt) {
> 20 |   setData(evt.editor.getData())
     | ^  21 | }
  22 | 
  23 | 

Answer 1

CKEditor 组件在onChange属性中接收一个具有 2 个参数的函数——事件和编辑器：

<CKEditor
    ...
    onChange={(event, editor) => ...}

因此，您可以编写 onEditorChange 函数，例如：

function onEditorChange(event, editor) {
  setData(editor.getData())
}

CKEditor 官方文档