如何发送draftjs数据到mongodb



我想使文本编辑器和保存写入的数据到服务器(Mongodb)与它的样式,然后显示保存的写入数据在样式的方式,我做了编辑器的编码,但现在的问题是如何将数据发送到服务器。邮报》

下面是TextEditor.js的代码
import React, { Component } from "react";
import { Editor } from "react-draft-wysiwyg";
import { EditorState, convertToRaw } from "draft-js";
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
import draftToHtml from "draftjs-to-html";
export default class TextEditor extends Component {
state = {
editorState: EditorState.createEmpty(),
};
onEditorStateChange = (editorState) => {
this.setState({
editorState,
});
};
render() {
const { editorState } = this.state;
console.log(draftToHtml(convertToRaw(editorState.getCurrentContent())));
return (
<div>
<Editor
editorState={editorState}
toolbarClassName="toolbarClassName"
wrapperClassName="wrapperClassName"
editorClassName="editorClassName"
onEditorStateChange={this.onEditorStateChange}
/>
<textarea
disabled
value={draftToHtml(convertToRaw(editorState.getCurrentContent()))}
></textarea>
</div>
);
}
}

Write PageWrite.jsx

import axios from 'axios';
import TextEditor from '../../components/TextEditor/TextEditor';
export default function Write() {
const [desc, setDesc] = useState('');
const { user } = useContext(Context);
const handleSubmit = async (e) => {
e.preventDefault();
const newPost = {
username: user.username,
desc,
};
try {
const res = await axios.post('/posts', newPost);
window.location.replace('/post/' + res.data._id);
} catch (err) {}
};
return (
<div className='write'>
<form className='writeForm' onSubmit={handleSubmit}>
<TextEditor
placeholder='Write your story'
type='text'
className='writeInput writeText'
onChange={(e) => setDesc(e.target.value)}
/>
<button className='writeSubmit' type='submit'>
نشر
</button>
</form>
</div>
);
}

Post.js

const mongoose = require('mongoose');
const PostSchema = new mongoose.Schema({
desc: {
type: String,
required: true,
},
});
module.exports = mongoose.model('Post', PostSchema);

我知道我必须使用JSON.stringify(convertToRaw())convertFromRaw(),但我不知道在哪里使用它们,现在已经一周了,我还在试图解决这个问题。

应该是这样的

import { EditorState } from "draft-js";
const data = convertFromRaw(response);
const state = EditorState.createWithContent(data);
<Editor editorState={state} readOnly={true} />

最新更新