jpuri / react-draft-wysiwyg

A Wysiwyg editor build on top of ReactJS and DraftJS. https://jpuri.github.io/react-draft-wysiwyg
MIT License
6.41k stars 1.16k forks source link

upload image not show in editor #1064

Open dbaonam99 opened 3 years ago

dbaonam99 commented 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\"/>

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>
  )
}
keoy7am commented 2 years ago

i think it might be same issue form here