import React from 'react';
// 引入编辑器以及EditorState子模块
import BraftEditor, { EditorState } from 'braft-editor';
// 引入编辑器样式
import 'braft-editor/dist/index.css';
import "./index.scss";
import * as qiniu from 'qiniu-js';
import Mutil from 'util/mutil.jsx';
const _mutil = new Mutil();
import ProductService from "service/product-service.jsx";
const _ProductService = new ProductService();
import SignupLoginService from "service/signup-service.jsx";
const _SignLoginService = new SignupLoginService();
import {observer, inject} from 'mobx-react';

@inject("uiStore")
@observer
export default class EditorDemo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        // 创建一个空的editorState作为初始值
        editorState: EditorState.createFrom(''),
        htmlDom:""
    }
    this.upImgs = this.upImgs.bind(this);
  }
  
  componentWillMount(){
    _SignLoginService.getImgUpload().then(res=>{
      let data = res.data
      this.props.uiStore.changeImgUpload(data);
    },err=>{
      _mutil.errorTips("发生错误!");
    })
  }

  async componentDidMount () {
      // 假设此处从服务端获取html格式的编辑器内容
      
      // 使用EditorState.createFrom将html字符串转换为编辑器需要的editorState数据
      
  }

  submitContent = async () => {
      // 在编辑器获得焦点时按下ctrl+s会执行此方法
      // 编辑器内容提交到服务端之前，可直接调用editorState.toHTML()来获取HTML格式的内容
      const htmlContent = this.state.editorState.toHTML();
      this.setState({
        htmlDom:htmlContent
      },()=>{
        console.log(this.state.htmlDom);//存上了
      });
  }

  handleEditorChange = (editorState) => {
      this.setState({ editorState },()=>{
        const html2 = this.state.editorState.toHTML();
        this.setState({
          htmlDom:html2
        },()=>{
          console.log(this.state.htmlDom);//存上了
          this.props.onValueChange(this.state.htmlDom);
        });
      });
      
  }
  upImgs(param){
    const filesimg = param.file
    const fileMaxSize = 500000;
    if(!/image\/\w+/.test(filesimg.type)){
      alert('选择的文件不是图片');
      return false;
    }
    if(filesimg.size <= fileMaxSize){
      this.uploadImg(filesimg,param);
    }else{
      alert("文件过大");
    }
  }
  uploadImg(imgSource,param){
    const uptoken  = this.props.uiStore.imgupload.token;
    const file = imgSource;
    const key = null;
    const config = {
      useCdnDomain: false,
      region: null,    
      uphost:"up-z2.qiniup.com/"
    }
    const putExtra = {
      fname: imgSource.name,  //文件原文件名
      params: {}, //用来放置自定义变量
      mimeType: ["image/png", "image/jpeg","image/jpg"]
    }
    const observable = qiniu.upload(file,key,uptoken,putExtra,config);
    observable.subscribe({
      next:(res)=>{
        //
      },
      error:(err)=>{
        //
        _mutil.errorTips(err);
      },
      complete:(res)=>{
        const imgsurl = this.props.uiStore.imgupload.domain + res.hash;
        console.log(imgsurl)
        const successFn = (imgsurl)=>{
          param.success({
            url:imgsurl
          })
        };
        successFn(imgsurl);
      }
    })
  }
  render () {
      const { editorState } = this.state;
      const myUploadFn = (param)=>{
        const filesimg = param.file
        const fileMaxSize = 500000;
        if(!/image\/\w+/.test(filesimg.type)){
          alert('选择的文件不是图片');
          return false;
        }
        if(filesimg.size <= fileMaxSize){
          this.uploadImg(filesimg,param);
        }else{
          alert("文件过大");
        }
      }
      return (
          <div className="my-component">
              <BraftEditor
                  value={editorState}
                  onChange={this.handleEditorChange}
                  onSave={this.submitContent}
                  media={{uploadFn:this.upImgs}}
              />
          </div>
      )

  }

}

react-braft

https://www.yuque.com/margox/be/gz44tn#uc5rqq

qiniu

https://developer.qiniu.com/kodo/sdk/1283/javascript