javascript - 如何在 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;

每当我尝试在文本编辑器部分写字时，这就是错误

标签： javascriptreactjsckeditorckeditor5

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

问题描述

解决方案

推荐阅读