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 id="ddd" ref={(el) =>{this.reactQuillRef = el}} value={this.state.text} onChange={this.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;