I am using react-draft-wysiwyg text editor based on draft js in my application. I am facing some issues while trying to upload image via the editor image control. I am using the custom FileUploader Component. It is saving the image in the server and i am also getting the proper response that contains the uploaded image url. But the image is not showing in the editor. Here is my code for the Editor Component:
import React from 'react';
import PropTypes from 'prop-types';
import { Editor } from 'react-draft-wysiwyg';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
import FileUploader from 'containers/Globals/HtmlEditor/FileUploader';
const HTMLEditor =({editorState, onEditorStateChange}) => {
return (
<Editor
toolbarClassName="toolbarClassName"
wrapperClassName="wrapperClassName"
editorClassName="editorClassName"
editorState={editorState}
onEditorStateChange={onEditorStateChange}
toolbar={{ image: {
className: 'editor_uploader',
component: FileUploader
}}}
hashtag={{
separator: ' ',
trigger: '#',
className: 'hashtag-className',
}}
mention={{
separator: ' ',
trigger: '@',
suggestions: [
],
}}
/>
);
}
HTMLEditor.propTypes = {
};
export default HTMLEditor;
Below is my custom Fileuploader component for the FileUpload in TextEditor.
import React, {Component} from 'react';
import Dropzone from 'react-dropzone';
import { connect } from 'react-redux';
import { uploadHtmlEditorImagesRequest } from './actions';
import { makeSelectHTMLEditorImageDetailInfo } from './selectors';
import { createStructuredSelector } from 'reselect';
const mapDispatchToProps = dispatch => ({
uploadHtmlEditorImagesRequest: (file) => dispatch(uploadHtmlEditorImagesRequest(file))
});
const mapStateToProps = createStructuredSelector({
image_file: makeSelectHTMLEditorImageDetailInfo()
});
const style = {
borderWidth: 2,
borderColor: 'black',
borderStyle: 'dashed',
borderRadius: 4,
margin: 30,
padding: 30,
width: 200,
transition: 'all 0.5s'
};
const activeStyle = {
borderStyle: 'solid',
backgroundColor: '#eee',
borderRadius: 8
};
class FileUploader extends Component {
constructor(props) {
super(props);
this.state = {
image_name: ''
}
}
onDrop = files => {
if (files) {
this.props.uploadHtmlEditorImagesRequest(files[0]);
}
};
uploadCallback(file) {
return new Promise(
(resolve, reject) => {
resolve({data: {link: "http://www.myfilmviews.com/wp-content/uploads/2012/12/scarlett_johansson.jpg"}});
}
);
}
componentWillReceiveProps(nextProps) {
if(nextProps.image_file.get('file_path')) {
nextProps.image_file
.entrySeq()
.map(([key, value]) => {
if(key==="file_path") {
this.setState(state => ({
image_name: value
}));
console.log(this.state.image_name)
this.uploadCallback();
}
})
.toArray();
}
}
render() {
return (
<div className="uploader">
<Dropzone
className="dropzone"
onDrop={this.onDrop}
style={style}
activeStyle={activeStyle}
multiple={false}
accept="image/*"
>
Drop files here or <br />
<span className="btn btn-link">Upload</span> {' '}
</Dropzone>
</div>
)
}
}
export default connect(mapStateToProps, mapDispatchToProps)(FileUploader);
please guide me to find the issue and fix .
It would be great if you can paste the response you get from server, this would help to answer it more precisely. What I am guessing is the response you get from the server won't have <figure>
tag , can you wrap the <img>
tag with the <figure>
tag.
For some reason the RTE needs the figure tag for the image to show up. I had the same issue and I could solve it by doing this.
<figure>
<img src = "">
</figure>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.