如何将Draftjs的内容发布到数据库

如何解决如何将Draftjs的内容发布到数据库

我正在一个以reactjs为前端的项目中，在该项目中我有文章，而对于文章正文，我使用Draftjs作为编辑器将文本和图片放在一起，为此，我使用react-draft-wysiwyg包，它在前端方面很好，但我不知道如何将结果保存到数据库。我的后端是用于创建rest api的Django和django-rest-framework。这是CreateArticle.js：

import React,{ useState,useEffect,useCallback } from 'react'
import { usedispatch,useSelector } from 'react-redux'
import { unwrapResult } from '@reduxjs/toolkit'

import { useHistory } from "react-router-dom";

import { addNewArticle } from './managementSlice'

import { selectUser } from '../authentications/authenticationsSlice'

import './CreateArticle.scss';
import { selectAllSubjects,fetchSubjects } from '../subjects/subjectsSlice';
import { selectAllTags,fetchTags } from '../tags/tagsSlice';



import {EditorState,convertToRaw} from "draft-js";
import {Editor} from "react-draft-wysiwyg"

import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';

export const CreateArticle = () => {

  const [title,setTitle] = useState('')
  const [photo,setPhoto] = useState('')

  const [slug,setSlug] = useState('')
  
  const [subjectId,setSubjectId] = useState(0)
  const [tags,setTags] = useState([])

  const [addRequestStatus,setAddRequestStatus] = useState('idle')

  const user = useSelector(selectUser);
  const subjects = useSelector(selectAllSubjects)
  const allTags = useSelector(selectAllTags)

  const subjectStatus = useSelector((state) => state.subjects.status)
  const tagStatus = useSelector( (state) => state.tags.status)
  
  const [editorState,setEditorState] = React.useState(
    () => EditorState.createEmpty(),);



  const dispatch = usedispatch()

  const onSubjectChanged = (e) => setSubjectId(e.target.value)

  const onTitleChanged = (e) => {
    setTitle(e.target.value) 
    setSlug(e.target.value.toLowerCase().replace(" ","-"))}

    const onPhotochanged = (e) => {
      setPhoto(e.target.files[0])
      console.log(e.target.files[0]);
    }

  const onTagsChanged = (e) => {
    const selectedOptions = [...e.target.selectedOptions].map(o => parseInt(o.value))
    setTags(selectedOptions)
  }
  let history = useHistory();



 
 function uploadFileCallBack(file) {
   return new Promise(
     (resolve,reject) => {
      if (file) {
         let reader = new FileReader();
         reader.onload = (e) => {
             resolve({ data: { link: e.target.result } })
         };
         reader.readAsDataURL(file);
     }
      }
   );
 }

 const onEditorStateChange = (editorState) => {
  const contentState = editorState.getCurrentContent();
  console.log('content state',convertToRaw(contentState));
   setEditorState(editorState);
 };


  const onSaveArticleClicked = async () => {
   
    const contentState =  convertToRaw(editorState.getCurrentContent());
    let article = { subject:subjectId,title: title,body: contentState,tags:tags,photo:photo,slug:slug } 


    if (user){
      try {
        setAddRequestStatus('pending')
        console.log('addRequestStatus:',addRequestStatus)
        const resultAction = await dispatch( addNewArticle(article) )
      
        unwrapResult(resultAction)
        setTitle('')
        // setBody('')
        setTags([])
        setSubjectId('')
        setSlug('')
        history.push("/management")
      } catch (err) {
        console.error('Failed to save the article: ',err)
      } finally {
        setAddRequestStatus('idle')

      }
    }
    
  }



  useEffect( () => 
  {
    if (subjectStatus === 'idle') {
      dispatch(fetchSubjects())
    }
  },[subjectStatus,dispatch]
  )

  let subjectsOptions
  
  if (subjectStatus === 'loading') {

    subjectsOptions = <div className="loader"> Loading... </div>

  } else if (subjectStatus === 'succeeded') {

    subjectsOptions = subjects.map((subject) => (
      <option key={subject.id} value={subject.id} >
        {subject.title}
      </option>
    ))

  } else if (subjectStatus === 'error') {
    subjectsOptions = <div> Something went wrong </div>
  }


  useEffect( () => 
  {
    if (tagStatus === 'idle') {
      dispatch(fetchTags())
    }
  },[tagStatus,dispatch]
  )

  let tagsOptions
  
  if (tagStatus === 'loading') {

    tagsOptions = <div className="loader"> Loading... </div>

  } else if (tagStatus === 'succeeded') {

    tagsOptions = allTags.map((tag) => (
      <option key={tag.id} value={tag.id} >
        {tag.title}
      </option>
    ))

  } else if (tagStatus === 'error') {
    tagsOptions = <div> error </div>
  }



  return (
    <div className="create-article">
      <div className="create-article-head">

      </div>
      <form className="create-article-form" >
        <label htmlFor="article-title">Article Title:</label>
        <input
          type="text"
          className="article-title-input"
          id="id-article-title-input"
          name="title"
          placeholder="What's on your mind?"
          value={title}
          onChange={onTitleChanged}
        />

        <label htmlFor="article-photo" > Article photo: </label>
        <input
          type="file"
          className="article-photo-input"
          id="id-article-photo-input"
          // name="photo"
          placeholder="What's on your mind?"
          // value={photo}
          onChange={onPhotochanged}
        />
        <label htmlFor="article-subject">subject:</label>
        <select 
          id="id-subjects-article-select" 
          className="subjects-article-select" 
          onChange={onSubjectChanged}>
          <option value="">
            انتخاب موضوع
          </option>
          {subjectsOptions}
        </select>

        <label htmlFor="article-tags">tags:</label>
        <select 
          id="id-tags-article-select" 
          className="tags-article-select" 
          onChange={onTagsChanged}
          multiple
        >
          <option value="">
            SELECT TAGS
          </option>
          {tagsOptions}
        </select>

        <Editor
          

          wrapperClassName="easy-editor"
          editorState={editorState}
          onEditorStateChange={onEditorStateChange}    
          toolbar={{
            inline: { inDropdown: true },list: { inDropdown: true },textAlign: { inDropdown: true },link: { inDropdown: true },history: { inDropdown: true },image: { 
              uploadCallback: uploadFileCallBack,alt: { present: true,mandatory: true },previewImage: true,},}}
      />

        <button 
          type="button" 
          onClick={onSaveArticleClicked} 
          
        >
          Save Article
        </button>
      </form>
    </div>
  )
}

如果您能帮助我保存它，那就太好了。