react-draft-wysiwyg icon indicating copy to clipboard operation
react-draft-wysiwyg copied to clipboard

upload image not show in editor

Open dbaonam99 opened this issue 5 years ago • 1 comments

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>
  )
}

dbaonam99 avatar Jan 03 '21 14:01 dbaonam99

i think it might be same issue form here

keoy7am avatar Sep 20 '22 18:09 keoy7am