在Vue项目使用quill-editor带样式编辑器（更改插入图片和视频）

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