问题

以下是您要翻译的内容：

I have a working react-draft-wysiwyg editor application. I am able to add images to editor using this. There is one issue i am facing, please check this below:

Here's the code so far what i've tried. And note that for display purpose even if i pass truncatedUrl inside callback the error is "Invalid URL passed",

So basically what i am trying to do is show some small string inside the "File Upload" Box but when i click on "Add" the complete image URL needs to be passed.

Here's what i've tried so far:

import {Editor} from "react-draft-wysiwyg";
import { EditorState, ContentState } from "draft-js";
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";

const [editorState, setEditorState] = useState(EditorState.createEmpty());

useEffect(() => {
    let html = stateToHTML(editorState.getCurrentContent());
    setContent(html);
}, [editorState]);

const handleEditorChange = (state) => {
    setEditorState(state);
    const selectedBlock = state.getCurrentContent().getBlockForKey(
      state.getSelection().getStartKey()
    );
    const selectedEntity = selectedBlock.getEntityAt(
      state.getSelection().getStartOffset()
    );
    if (selectedEntity !== null) {
      if (typeof selectedEntity.getData === 'function') { // add this check
        const image = selectedEntity.getData().url;
        setImageFile(image); // remove data URL prefix
      } else {
        console.error('selectedEntity does not have getData method');
      }
    } else {
      setImageFile(null);
    }
};

const addLesson = async () => {
    setIsUploading(true);

    try {
      const formData = new FormData();
      formData.append('name', title);
      formData.append('content_type', contentType);
      if (contentType === 'text' && content) {
        formData.append('content', content);
      }
      if (contentType === 'video' && video) {
        formData.append('content', video);
      }
      formData.append('course_id', course_id);
      formData.append("imageFile", imageFile);

      const response = await axios.post(url() + 'api/admin/lessons', formData);
      if (response?.status === 200) {
        setSuccess('Lesson successfully added.');
        window.setTimeout(() => {
          history.push(`/course/${course_id}/lessons`);
        }, 1000);
      }
    } catch (error) {
      console.error(error);
      setError(error?.response?.data?.msg);
    }

    setIsUploading(false);
};

return (
   <div className="row m-3">
                <h6 className="edit-box-label ml-2">Lesson Content</h6>
                <div className="col-xl-12">
                   <Editor
                     editorState={editorState}
                     onEditorStateChange={handleEditorChange}
                    toolbar={{
                      image: {
                        uploadCallback: (file) => {
                          return new Promise((resolve, reject) => {
                            const reader = new FileReader();
                            reader.readAsDataURL(file);
                            reader.onload = () => {
                              const dataURL = reader.result;
                              const truncatedDataURL = dataURL.substring(10, 30) + "..."; // set the maximum length of the truncated string
                              resolve({ data: { link: dataURL }, link: { url: truncatedDataURL } });
                            };
                            reader.onerror = (error) => {
                              reject(error);
                            };
                          });
                        },
                        alt: { present: true, mandatory: false }
                      }
                    }}
                   />
                </div>
              </div>
)

Requesting help regarding this, all your efforts are appreciated.

Regards,

import {Editor} from "react-draft-wysiwyg";
import { EditorState, ContentState } from "draft-js";
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
const [editorState, setEditorState] = useState(EditorState.createEmpty())
useEffect(() => {
let html = stateToHTML(editorState.getCurrentContent())
setContent(html)
}, [editorState])
const handleEditorChange = (state) => {
setEditorState(state);
const selectedBlock = state.getCurrentContent().getBlockForKey(
state.getSelection().getStartKey()
);
const selectedEntity = selectedBlock.getEntityAt(
state.getSelection().getStartOffset()
);
if (selectedEntity !== null) {
if (typeof selectedEntity.getData === 'function') { // add this check
const image = selectedEntity.getData().url;
setImageFile(image); // remove data URL prefix
} else {
console.error('selectedEntity does not have getData method');
}
} else {
setImageFile(null);
}
};
const addLesson = async () => {
setIsUploading(true);
try {
const formData = new FormData();
formData.append('name', title);
formData.append('content_type', contentType);
if (contentType === 'text' && content) {
formData.append('content', content);
}
if (contentType === 'video' && video) {
formData.append('content', video);
}
formData.append('course_id', course_id);
formData.append("imageFile", imageFile);
const response = await axios.post(url() + 'api/admin/lessons', formData);
if (response?.status === 200) {
setSuccess('Lesson successfully added.');
window.setTimeout(() => {
history.push(`/course/${course_id}/lessons`);
}, 1000);
}
} catch (error) {
console.error(error);
setError(error?.response?.data?.msg);
}
setIsUploading(false);
};
return (
<div className="row m-3">
<h6 className="edit-box-label ml-2">Lesson Content</h6>
<div className="col-xl-12">
<Editor
editorState={editorState}
onEditorStateChange={handleEditorChange}
toolbar={{
image: {
uploadCallback: (file) => {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => {
const dataURL = reader.result;
const truncatedDataURL = dataURL.substring(10, 30) + "..."; // set the maximum length of the truncated string
resolve({ data: { link: dataURL } , link : { url : truncatedDataURL} });
};
reader.onerror = (error) => {
reject(error);
};
});
},
alt: { present: true, mandatory: false }
}
}}
/>
</div>
</div>
)

答案1

得分: 1

添加属性图像

toolbar={{
  image: {
    "previewImage": true,
    ...,
  },
  ...
}}

用于将您的Base64预览转换为图像预览。

toolbar={{
image:{
"previewImage": true,
...,
},
...
}}