Question

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

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>

图像没有显示在使用草稿js的react-draft-wysiwyg编辑器中

1 个答案: