美文网首页
react-braft富文本编辑器 七牛上传文件

react-braft富文本编辑器 七牛上传文件

作者: TouchMe丶 | 来源:发表于2018-09-20 12:28 被阅读842次
    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

    相关文章

      网友评论

          本文标题:react-braft富文本编辑器 七牛上传文件

          本文链接:https://www.haomeiwen.com/subject/whngnftx.html