前端富文本编辑react-quill的使用

1.装包：

npm install react-quill --save

2.引入：

import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';

3.使用：

<ReactQuill theme="snow" value={value} onChange={handleChange}/>

4.会遇到的问题：

如果你要用到复制图片的话，就会有个图片的src是base64的问题，这个时候通常后端有个单独的接口，通过传这个base64或者file，生成图片的链接，这样就会有个问题，那就是如何再回显的时候把图片显示出来？

解决方案：

 我们可以看到，ReactQuill的值可以是一个html字符串，也就是content对象，也可以是Quill Dalta，这两个参数都是onChange方法里面的；

 onChange方法下有4个参数content, delta, source, editor，我们需要把拷贝的图片地址换成一个链接，可以通过editor.getContents()获得富文本内所有的值，然后通过delta判断当前输入的是否是图片，是图片就替换src；

具体实现如下：

const handleQuilChange = (content, delta, source, editor) => {
        let delta_ops = delta.ops;
        let quilContent = editor.getContents();
        if (delta_ops && delta_ops.length) {
            if (
                delta_ops[delta_ops.length - 1].insert &&
                delta_ops[delta_ops.length - 1].insert.image
            ) {
                quilContent.ops.map(item => {
                    if (item.insert) {
                        let imgStr = item.insert.image;
                        if (imgStr && imgStr.indexOf('https://ecarx.stor.ecarxmap.com') === -1) {
                            let file = base64toFile(imgStr, 'marked');
                            axios({
                                method: 'POST',
                                url: '/issues/question/upload',
                                data: { file },
                                headers: { 'Content-Type': `multipart/form-data` }
                            }).then(res => {
                                if (res.data.code === '200') {
                                    item.insert.image = res.data.data;
                                    setQuillData(quilContent);
                                }
                            });
                        }
                    }
                });
            } else {
                setQuillData(quilContent);
            }
        } else {
            setQuillData(quilContent);
        }
}