I use the Draft wysiwyg for my React project .
But I can only get simple text, but I can not get and save the image.
How can I save both text and image on my server using Draft wysiwyg?
component text editor:
class TextEditor extends Component {
constructor(props) {
super(props);
this.state = {
editorState: EditorState.createEmpty(),
uploadedImages: [],
};
this._uploadImageCallBack = this._uploadImageCallBack.bind(this);
}
onEditorStateChange = (editorState) => {
this.setState({
editorState,
});
};
_uploadImageCallBack(file) {
let uploadedImages = this.state.uploadedImages;
const imageObject = {
file: file,
localSrc: URL.createObjectURL(file),
};
uploadedImages.push(imageObject);
this.setState({ uploadedImages: uploadedImages });
return new Promise((resolve, reject) => {
resolve({ data: { link: imageObject.localSrc } });
});
}
render() {
const { editorState } = this.state;
return (
<div style={{ height: "100%", width: "100%" }}>
<Editor
editorState={editorState}
toolbarClassName='toolbarClassName'
wrapperClassName='wrapperClassName'
editorClassName='editorClassName'
onEditorStateChange={this.onEditorStateChange}
toolbar={{
inline: { inDropdown: true },
list: { inDropdown: true },
textAlign: { inDropdown: true },
link: { inDropdown: true },
history: { inDropdown: true },
image: { uploadCallback: this._uploadImageCallBack },
inputAccept:
"application/pdf,text/plain,application/vnd.openxmlformatsofficedocument.wordprocessingml.document,application/msword,application/vnd.ms-excel",
}}
/>
</div>
);
}
}
export default TextEditor;
I use the TextEditor component, which is a class component, in another component, which is the functional component, and from there I send the data to the server.
thank for those to help me!