CKEditorError: Cannot read property 'name' of undefined

Question

我正在尝试构建一个网页来执行 CRUD 操作。我在从 Ckeditor 收集数据到 React Json 服务器中的 post 时出错。

This is the Error-

This is my code -

Note: Note: This Code is Working fine for normal input form but in the Ckeditor section it's not working

import { useHistory, Link } from 'react-router-dom';
import Header from '../Header/Header';
import bgpic from './a215_1_cover_image.jpg';

import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

const AddPost = () => {
  let history = useHistory();
  const [user, setUser] = useState({
    title: '',
    img: '',
    body: '',
  });

  const { title, img, body } = user;

  const onInputChange = (e) => {
    setUser({ ...user, [e.target.name]: e.target.value });
  };

  const onSubmit = async (e) => {
    e.preventDefault();
    await axios.post('http://localhost:3001/post', user);
    history.push('/');
  };
return (
    <>
      <div className='container'>
        <div className='w-75 mx-auto shadow p-5'>
          <h2 className='text-center mb-4'>Your Blog</h2>

          <form onSubmit={(e) => onSubmit(e)}>
            <div className='form-group'>
              <input
                type='text'
                required
                className='form-control form-control-lg'
                placeholder='Title'
                name='title'
                value={title}
                onChange={(e) => onInputChange(e)}
              />
            </div>

            <div className='form-group'>
              <CKEditor
                name='body'
                value={body}
                editor={ClassicEditor}
                onChange={(e) => onInputChange(e)}></CKEditor>
            </div>

          </form>
        </div>
      </div>
    </>
  );
};

export default AddPost;

Answer 1

根据 CKEditor 文档 Quick Start

您可以使用 editor.getData() 方法访问编辑器的数据

此外，您需要将道具 value 改为 data

会是这样的：

<CKEditor
  name="body"
  data={body}
  editor={ClassicEditor}
  onChange={(e, editor) => {
    setUser({
      ...user,
      body: editor.getData(),
    });
  }}
></CKEditor>

CKEditorError: Cannot read property 'name' of undefined

CKEditorError: Cannot read property 'name' of undefined

javascript

ckeditor

reactjs

ckeditor5