vue-quill-editor默认插入图片是直接将图片转为base64再放入内容中，如果图片比较大的话，富文本的内容就会很大。
插入视频是直接弹框输入URL地址，某些需求下我们需要让用户去本地选择自己的视频，我们可以通过vue-quill-editor内部的某些方法进行更改
该方法使用了 element-ui 和 文件上传七牛
一、npm 安装 vue-quill-editor
二、在main.js中引入
import VueQuillEditor from 'vue-quill-editor'
Vue.use(VueQuillEditor)HTML部分：为编辑器绑定各个API事件，定义一个隐藏的input框，用于点击图片或者视频图标上传文件
<template>
<div>
<!-- quill-editor插件标签 分别绑定各个事件-->
<quill-editor v-model="content" ref="myQuillEditor" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
@change="onEditorChange($event)">
</quill-editor>
<div class="limit">当前已输入 <span>{{nowLength}}</span> 个字符，您还可以输入 <span>{{SurplusLength}}</span> 个字符。</div>
<!-- 文件上传input 将它隐藏-->
<el-upload class="upload-demo" :action="qnLocation" :before-upload='beforeUpload' :data="uploadData" :on-success='upScuccess'
ref="upload" style="display:none">
<el-button size="small" type="primary" id="imgInput" v-loading.fullscreen.lock="fullscreenLoading" element-loading-text="插入中,请稍候">点击上传</el-button>
</el-upload>
</el-table>
</div>
</template>
CSS部分：
.quill-editor {
height: 745px; .ql-container {
height: 680px;
}
}
.limit {
height: 30px;
border: 1px solid #ccc;
line-height: 30px;
text-align: right;
span {
color: #ee2a7b;
}
}
.ql-snow .ql-editor img {
max-width: 480px;
}
.ql-editor .ql-video {
max-width: 480px;
}
JS部分：
import Vue from 'util/vueExt'
import { Component } from 'vue-property-decorator'
import * as Template from './editor.vue'
import * as Quill from 'quill' // 引入编辑器const STATICDOMAIN = '//ss.yidejia.com/'
const STATVIDEO = '//flv.yidejia.com/'
@Component({
mixins: [Template]})
export default class Editor extends Vue {
content = '' // 文章内容
editorOption = {} // 编辑器选项
addRange: any = new Array()
uploadData = {}
photoUrl = '' // 上传图片地址
uploadType = '' // 上传的文件类型（图片、视频）
