微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

如何在 React 中将数据从 CKEditor 发布到 json 服务器

如何解决如何在 React 中将数据从 CKEditor 发布到 json 服务器

我正在尝试构建一个网页来执行 CRUD 操作。如何从 Ckeditor 获取数据并在 React 的 Json 服务器中发布?

这是我的代码

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

import axios from 'axios';
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; 

每当我试图在文本编辑器部分写作时,这就是错误

enter image description here

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。