如何将图像保存在ReactJ中的Draftwysiwyg中

发布于 2025-02-10 04:36:37 字数 1978 浏览 2 评论 0原文

我为我的React项目使用Wysiwyg草案。

但是我只能得到简单的文字,但是我无法获得并保存图像。

如何使用wysiwyg在服务器上保存文本和图像?

组件文本编辑器:

class TextEditor extends Component {
  constructor(props) {
    super(props);
    this.state = {
      editorState: EditorState.createEmpty(),
      uploadedImages: [],
    };

    this._uploadImageCallBack = this._uploadImageCallBack.bind(this);
  }



  onEditorStateChange = (editorState) => {
    this.setState({
      editorState,
    });

  
  };

  _uploadImageCallBack(file) {
   
    let uploadedImages = this.state.uploadedImages;

    const imageObject = {
      file: file,
      localSrc: URL.createObjectURL(file),
    };

    uploadedImages.push(imageObject);

    this.setState({ uploadedImages: uploadedImages });

    return new Promise((resolve, reject) => {
      resolve({ data: { link: imageObject.localSrc } });
    });
  }
  render() {
    const { editorState } = this.state;
   
    return (
      <div style={{ height: "100%", width: "100%" }}>
     
        <Editor
          editorState={editorState}
          toolbarClassName='toolbarClassName'
          wrapperClassName='wrapperClassName'
          editorClassName='editorClassName'
          onEditorStateChange={this.onEditorStateChange}
          toolbar={{
            inline: { inDropdown: true },
            list: { inDropdown: true },
            textAlign: { inDropdown: true },
            link: { inDropdown: true },
            history: { inDropdown: true },
            image: { uploadCallback: this._uploadImageCallBack },
            inputAccept:
              "application/pdf,text/plain,application/vnd.openxmlformatsofficedocument.wordprocessingml.document,application/msword,application/vnd.ms-excel",
          }}
        />
       
      </div>
    );
  }
}

export default TextEditor;

我使用texteditor component,这是另一个组件中的类组件,即功能组件,然后从那里将数据发送到服务器。

感谢那些帮助我!

I use the Draft wysiwyg for my React project .

But I can only get simple text, but I can not get and save the image.

How can I save both text and image on my server using Draft wysiwyg?

component text editor:

class TextEditor extends Component {
  constructor(props) {
    super(props);
    this.state = {
      editorState: EditorState.createEmpty(),
      uploadedImages: [],
    };

    this._uploadImageCallBack = this._uploadImageCallBack.bind(this);
  }



  onEditorStateChange = (editorState) => {
    this.setState({
      editorState,
    });

  
  };

  _uploadImageCallBack(file) {
   
    let uploadedImages = this.state.uploadedImages;

    const imageObject = {
      file: file,
      localSrc: URL.createObjectURL(file),
    };

    uploadedImages.push(imageObject);

    this.setState({ uploadedImages: uploadedImages });

    return new Promise((resolve, reject) => {
      resolve({ data: { link: imageObject.localSrc } });
    });
  }
  render() {
    const { editorState } = this.state;
   
    return (
      <div style={{ height: "100%", width: "100%" }}>
     
        <Editor
          editorState={editorState}
          toolbarClassName='toolbarClassName'
          wrapperClassName='wrapperClassName'
          editorClassName='editorClassName'
          onEditorStateChange={this.onEditorStateChange}
          toolbar={{
            inline: { inDropdown: true },
            list: { inDropdown: true },
            textAlign: { inDropdown: true },
            link: { inDropdown: true },
            history: { inDropdown: true },
            image: { uploadCallback: this._uploadImageCallBack },
            inputAccept:
              "application/pdf,text/plain,application/vnd.openxmlformatsofficedocument.wordprocessingml.document,application/msword,application/vnd.ms-excel",
          }}
        />
       
      </div>
    );
  }
}

export default TextEditor;

I use the TextEditor component, which is a class component, in another component, which is the functional component, and from there I send the data to the server.

thank for those to help me!

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文