react-quill 富文本编辑器 ---- 图片处理

import React,{Component} from 'react' ;
import ReactQuill,{ Quill } from  'react-quill' ;
import  'react-quill/dist/quill.snow.css' ;
import { Button ,Modal,message} from  'antd' ;
import MYURL  from  'api/config' ;
import { ImageDrop } from  'quill-image-drop-module' ;
Quill.register( 'modules/imageDrop' , ImageDrop);

class Editer extends Component {
    constructor(props) {
        super(props)
          this .state = { text: '' }  //   You can also pass a Quill Delta here 
         this .handleChange =  this .handleChange.bind( this  )
          this .selectImage =  this .selectImage.bind( this  );
          this .changeImageBeforeUpload =  this .changeImageBeforeUpload.bind( this  );
          this .uploadForImage =  this .uploadForImage.bind( this  );
          this .imageHandler =  this .imageHandler.bind( this  );
          this .showUploadBox =  this .showUploadBox.bind( this  );
          this .hideUploadBox = this .hideUploadBox.bind( this  );
          this .handleUpload = this .handleUpload.bind( this  );
    }
    handleChange(value) {
          //   if (value) ReactQuill.getSelection().dangerouslyPasteHTML(value); 
         this  .setState({ text: value })
    };
    modules ={ //  富文本配置 
         toolbar:{
            container:[
                [{  'header': [1, 2, 3, 4, 5, 6,  false  ] }],
                [ 'bold', 'italic', 'underline', 'strike','blockquote'],         //   toggled buttons 
                ['blockquote', 'code-block' ],
                  //   [{ 'header': 1 }, { 'header': 2 }],               // custom button values 
                [{ 'script': 'sub'}, { 'script': 'super' }],       //   superscript/subscript 
                [{ 'indent': '-1'}, { 'indent': '+1' }],           //   outdent/indent 
                [{ 'direction': 'rtl' }],                          //   text direction 
                [{ 'size': ['small',  false , 'large', 'huge'] }],   //   custom dropdown 
                [{'list': 'ordered'}, {'list': 'bullet'}, {'indent': '-1'}, {'indent': '+1'},{ 'align' : [] }],
                [{  'color': [] }, { 'background': [] }],           //   dropdown with defaults from theme 
                [{ 'font' : [] }],
                [{  'align' : [] }],
                [ 'link', 'image', 'video' ],
                [ 'clean' ],
            ],
            handlers: {
                 'image': this .showUploadBox.bind( this  )
            }
        },
        imageDrop:   true  ,
    };
    showUploadBox(){
          this  .setState({
            uploadBoxVisible:  true  
        });
    };
    hideUploadBox(){
          this  .setState({
            uploadBoxVisible:  false  
        });
    };
    
    selectImage(){
          this .refs.uploadInput.click(); //  点击modal的html结构中的input标签 
     };

    changeImageBeforeUpload(e){
        const file  = e.target.files[0 ];
          if  (! file) {
              return  ;
        }
        let src;
          //   匹配类型为image/开头的字符串 
         if  (file.type==="image/png"||file.type==="image/jpeg" ) {
            src  =  URL.createObjectURL(file);
        }  else  {
            message.error( "图片上传只支持JPG/PNG格式,请重新上传！" );
              return  ;
        }
          if  (file.size/1024/1024>5 ) {
            message.error( "图片上传大小不要超过5MB,请重新上传！" );
              return  ;
        }
          this  .setState({
            src:src,
            file:file
        })
        console.log( 'eeeeeee' ,window)
    }
      /*  3.开始上传图片  */  
    handleUpload(){      
        let this_ = this  ;
          /*  调用上传图片的封装方法  */ 
         if (! this  .state.file){
            alert( '请选择图片！！' )
        }  else  {
            let fileServerAddr  = MYURL.fileServer  //  服务器地址 
            let file = this  .state.file.name
            let size  = this  .state.file.size
              this .uploadForImage(fileServerAddr,file,size, function  (response) { //  回调函数处理进度和后端返回值 
                console.log('res----?>' ,response)
                  if  ((response && response.status === 200) ||(response && response.status === "200" )) {
                    message.success( "上传成功！" );
                    this_.hideUploadBox();  //  隐藏弹框 
                    console.log("response.data.url???=>" ,response.data.url)
                    this_.imageHandler(response.data.url);  //  处理插入图片到编辑器 
                } else   if  (response && response.status !== 200 ) {
                    message.error(response.msg)
                }
            },
            localStorage.getItem( "access_token" ));
        }
        
    };
    uploadForImage(url,data,size,callback,token) {  //  data是数据列表 
         if  (! data) {
            alert( '请选择图片！！' )
            console.log( '未选择文件' );
              return  ;
        }  else  {
            let xhr  =  new   XMLHttpRequest();
            let formdata  =  new   FormData();
            formdata.append( 'file' , data);
            formdata.append( 'fileSize' , size);
            xhr.onload =() => {
              if (xhr.status === 200 ||xhr.statusn ==='200'  ){
                let response  = JSON.parse(xhr.response)
                console.log( 'res====' ,response)
                callback(response);
            }
        };
          //   xhr.open('POST', url, true);  // 第三个参数为async?，异步/同步 
        xhr.open('GET', url,  true );   //   第三个参数为async?，异步/同步 
        xhr.setRequestHeader("accessToken" ,token);
        xhr.send(formdata);
        }
        
    }
      /*  4.处理图片插入  */  
    imageHandler(url){
          if  ( typeof   this .reactQuillRef.getEditor !== 'function')  return  ;
        const quill  =  this  .reactQuillRef.getEditor()
          var  range =  quill.getSelection();
        let index  = range ? range.index : 0 ;
        quill.insertEmbed(index,  "image",url, Quill.sources.USER); //  插入图片 
        quill.setSelection(index + 1); //  光标位置加1  
        console.log("quill.getSelection.======" ,quill.getSelection().index)
    };
    render() {
        return   (
         <div style={{maxHeight:"500px"}}>
            <ReactQuill >.handleChange}
                theme={"snow"}  modules={ this .modules} style={{height:"300px"}} />
            < Modal
                title ="上传图片" 
                visible ={ this  .state.uploadBoxVisible}
                onCancel ={ this  .hideUploadBox}
                onOk ={  this  .handleUpload }
                maskClosable ={ false  }
                width ={500 }
                 >
                <div className="ImagaBox" >
                    <div>
                        <Button onClick={ this .selectImage.bind( this )} style={{background:"#18ade4",border:"none",color:"#fff"}}> 
                            选择图片
                         </Button>
                        <input ref="uploadInput" type='file' accept='image/*' 
                            style ={{width:"100px",border:"none",visibility:"hidden" }}
                            onChange ={ this .changeImageBeforeUpload.bind( this  )}
                         />
                    </div>
                    <div style={{textAlign:"center",margin:"10px 0"}}> 
                        {  this .state.src?
                            <img src={ this .state.src} alt="" style={{maxWidth:"100%",height:"300px"}}/>
                             :
                             <div style={{background:"#f2f2f2",width:"100%",height:"300px"}}></div>
                         }
                     </div>
                </div>
            </Modal>
        </div>
       )
    }
};
export   default   Editer;

 

查看更多关于react-quill 富文本编辑器 ---- 图片处理的详细内容...