CKEditorError：无法读取未定义的属性“名称”

问题描述

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

这是错误-

这是我的代码 -

注意：注意：此代码适用于普通输入表单，但在 Ckeditor 部分不起作用

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;


  

解决方法

根据 CKEditor 文档 Quick Start

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

另外，你需要将 props value 改为 data

应该是这样的：

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