javascript - react 草稿所见即所得 : Image Upload when I click the "Add" Button

Question

在 React.js 应用程序上，我尝试制作 https://jpuri.github.io/react-draft-wysiwyg/#/docs编辑器上传图像并将其嵌入到编辑器的内容中。

到目前为止，我设法用这段代码做到了这一点:

import React, { Component } from 'react';
import { Editor } from 'react-draft-wysiwyg';
import {convertFromRaw, convertToRaw, EditorState} from 'draft-js';    
import "../../node_modules/react-draft-wysiwyg/dist/react-draft-wysiwyg.css"
import "../../node_modules/draft-js-image-plugin/lib/plugin.css"



export default class CustomEditor extends Component {

  uploadCallback(file) {

    return new Promise(
      (resolve, reject) => {
        var reader=new FileReader();

        reader.onloadend = function() {
          Meteor.call('fileStorage.uploadFile',reader.result,file.name,file.type,(err,response)=>{
              console.log(response)
             if(err){
               reject(err)
             }

             resolve({ data: { link: response.data.url } });
          })
        }

        reader.readAsDataURL(file);
      }
    );
  }

  render() {

    const config={
      image: { uploadCallback: this.uploadCallback }
    }

    return (
      <div className="container-fluid">
        <Editor toolbar={ config } />
      </div>
    )
  }
}

但我的问题是当我选择文件时图像上传过程开始，当我点击“添加”按钮时我想开始上传过程，如下图所示:

那我该怎么做呢？

Answer 1

无法更改此行为。

您可以提供的唯一选项是 uploadCallback，请参阅 docs .

您可以找到上传代码的来源here ，很明显，这是不可能的。