Vue开发--富文本编辑vue-quill-editor自定义图片上传

图片上传

就是要一个富文本编辑器，然后有图片上传功能，因为vue-quill-editor是将图片转为base64编码，所以当图片比较大时，提交后台时参数过长，导致提交失败。

解决思路
将图片先上传至服务器，再将图片链接插入到富文本中
图片上传的话可以使用element或者iview，这里我以iview举例
图片上传区域要隐藏，自定义vue-quill-editor的图片上传，点击图片上传时调用iview或者element的图片上传，上传成功后在富文本编辑器中显示图片

1 安装 vue-quill-editor

npm install vue-quill-editor --save

main.js

import VueQuillEditor from 'vue-quill-editor'
Vue.use(VueQuillEditor);
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'

一、自定义vue-quill-editor图片上传
html:

<quill-editor
    v-model="content"
    :options="editorOption"
    ref="QuillEditor">
</quill-editor>

js:

<script>
    // 工具栏配置
    const toolbarOptions = [
      ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
      ['blockquote', 'code-block'],
    
      [{'header': 1}, {'header': 2}],               // custom button values
      [{'list': 'ordered'}, {'list': 'bullet'}],
      [{'script': 'sub'}, {'script': 'super'}],      // superscript/subscript
      [{'indent': '-1'}, {'indent': '+1'}],          // outdent/indent
      [{'direction': 'rtl'}],                         // text direction
    
      [{'size': ['small', false, 'large', 'huge']}],  // custom dropdown
      [{'header': [1, 2, 3, 4, 5, 6, false]}],
    
      [{'color': []}, {'background': []}],          // dropdown with defaults from theme
      [{'font': []}],
      [{'align': []}],
      ['link', 'image', 'video'],
      ['clean']                                         // remove formatting button
    ]
    
    export default {
        data () {
            return {
                content: '',
                editorOption: {                
                    modules: {
                        toolbar: {
                            container: toolbarOptions,  // 工具栏
                            handlers: {
                                'image': function (value) {
                                    if (value) {
                                        alert('自定义图片')
                                    } else {
                                        this.quill.format('image', false);
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }    
</script>

二、调用element或iview图片上传组件
html:

<Upload
    :show-upload-list="false"
    :on-success="handleSuccess"
    :format="['jpg','jpeg','png','gif']"
    :max-size="2048"
    multiple
    action="/file/upload"
    >
    <Button icon="ios-cloud-upload-outline" ></Button>
</Upload>
<quill-editor
    v-model="content"
    :options="editorOption"
    ref="QuillEditor">
</quill-editor>

css:

.ivu-upload {
    display: none;
}

js:

data () {
    return {
        content: '',
        editorOption: {                
	        modules: {
	          toolbar: {
	             container: toolbarOptions,  // 工具栏
	             handlers: {
	                'image': function (value) {
	                   if (value) {
	                       // 调用iview图片上传
	                       document.querySelector('.ivu-upload .ivu-btn').click()
	                   } else {
	                       this.quill.format('image', false);
	                   }
	                }
	             }
	          }
	       }
       }
    }
},
methods: {
    handleSuccess (res) {
        // 获取富文本组件实例
        let quill = this.$refs.QuillEditor.quill
        // 如果上传成功
        if (res) {
            // 获取光标所在位置
            let length = quill.getSelection().index;
            // 插入图片，res为服务器返回的图片链接地址
            quill.insertEmbed(length, 'image', res)
            // 调整光标到最后
            quill.setSelection(length + 1)
        } else {
            // 提示信息，需引入Message
            Message.error('图片插入失败')
        }
    },
} 

三、假如需要多个富文本编辑器
可能不止一处地方用到，比如添加完成后还有编辑功能，那就复制一份文件上传和富文本编辑：两个富文本用不同的ref标记，在各自配置中调用各自的文件上传；文件上传成功也使用不同的方法名称，里面调用各自的富文本编辑器。

重点：富文本和文件上传不管使用类名还是什么方式区分的，这两处地方都要和之前区分开。

转载自：https://www.jianshu.com/p/9e4e4d955d0f