VUE-element UI使用富文本

富文本使用的是vue-quill-editor

需求：
使用富文本编辑器，上传图文信息。因为vue-quill-editor是将图片转为base64编码，所以当图片比较大（图片数量较多），提交后台时参数过长，导致提交失败或者前台展示时加载响应时间过长，用户体验差。

解决思路：
将富文本的图片上传功能，调整为点击图片icon调用隐藏的上传组件，使图片先上传至服务器，再将图片链接插入到富文本中
图片上传的话这里使用了element上传组件。
图片上传区域隐藏，自定义vue-quill-editor的图片上传，点击图片上传时调用。

配置：
安装：

npm install vue-quill-editor --save
1

图片扩展功能安装：

npm install quill-image-extend-module --save-dev
1

导入：

import Quill from 'quill'
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { container, ImageExtend } from 'quill-image-extend-module'
Quill.register('modules/ImageExtend', ImageExtend)
1
2
3
4
5
6
7

注册组件：

components: {
quillEditor
1
2

}

html使用：

<quill-editor ref="text" v-model="form.content" class="myQuillEditor" :options="editorOption" />
1

data配置：

editorOption: {
            modules: {
                ImageExtend: {
                    // 如果不作设置，即{}  则依然开启复制粘贴功能且以base64插入
                    name: "file", // 图片参数名
                    size: 3, // 可选参数 图片大小，单位为M，1M = 1024kb
                    action: "/res/imgUpload", // 服务器地址, 如果action为空，则采用base64插入图片
                    // response 为一个
1
2
3
4
5
6
7