javascript - 使用草稿js在react-draft-wysiwyg编辑器中未显示图像

Question

我在我的应用程序中使用基于草稿js的react-draft-wysiwyg文本编辑器。我在尝试通过编辑器图像控件上传图像时遇到一些问题。我正在使用自定义 FileUploader 组件。它将图像保存在服务器中，我也得到了包含上传图像网址的正确响应。但编辑器中图像未显示。这是我的编辑器组件的代码:

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;

下面是我为 TextEditor 中的 FileUpload 自定义的 Fileuploader 组件。

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

请指导我找到问题并解决。

Answer 1

如果您可以粘贴从服务器获得的响应，那就太好了，这将有助于更准确地回答问题。我猜测您从服务器获得的响应不会有 <figure> 标签，你能把 <img>包裹起来吗？标记 与 <figure>标签。

出于某种原因，RTE 需要图形标签才能显示图像。我有同样的问题，我可以通过这样做来解决它。

<figure>
  <img src = "">
 </figure>