Open dbaonam99 opened 3 years ago
The image uploaded to the database like this: <img src=\"https://i.imgur.com/m0uV0R5.png\" alt=\"123\" style=\"height: undefined;width: undefined\"/>
<img src=\"https://i.imgur.com/m0uV0R5.png\" alt=\"123\" style=\"height: undefined;width: undefined\"/>
but when i load this code to editor input, it only text show. sorry my english is not good
import React, { useEffect, useState } from "react"; import { Editor } from "react-draft-wysiwyg"; import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css"; import { stateFromHTML } from 'draft-js-import-html' import { EditorState, convertToRaw } from "draft-js"; import draftToHtml from "draftjs-to-html"; function uploadImageCallBack(file) { return new Promise( (resolve, reject) => { const xhr = new XMLHttpRequest(); // eslint-disable-line no-undef xhr.open('POST', 'https://api.imgur.com/3/image'); xhr.setRequestHeader('Authorization', 'Client-ID 8d26ccd12712fca'); const data = new FormData(); // eslint-disable-line no-undef data.append('image', file); xhr.send(data); xhr.addEventListener('load', () => { const response = JSON.parse(xhr.responseText); resolve(response); }); xhr.addEventListener('error', () => { const error = JSON.parse(xhr.responseText); reject(error); }); }, ); } export default function DashboardEditor(props) { const [editorState, setEditorState] = useState(EditorState.createEmpty()); const onEditorStateChange = (editorState) => { setEditorState(editorState) props.setAboutUsContent(draftToHtml(convertToRaw(editorState.getCurrentContent()))) } useEffect(() => { if (props.content) { let contentState = stateFromHTML(props.content); let test = EditorState.createWithContent(contentState); setEditorState(EditorState.moveFocusToEnd(test)); } }, [props.content]); return ( <div> <Editor editorState={editorState} toolbarClassName="toolbarclassName=" wrapperClassName="wrapperclassName=" editorClassName="editorclassName=" onEditorStateChange={onEditorStateChange} toolbar={{ image: { previewImage: true, uploadCallback: uploadImageCallBack, alt: { present: true, mandatory: true } }, }} /> </div> ) }
i think it might be same issue form here
The image uploaded to the database like this:
<img src=\"https://i.imgur.com/m0uV0R5.png\" alt=\"123\" style=\"height: undefined;width: undefined\"/>
but when i load this code to editor input, it only text show. sorry my english is not good