vue+element-ui 富文本编辑器（含图片、视频上传）

 效果图：

 1、安装相关插件

npm install vue-quill-editor --save
npm install quill-image-drop-module --save     
npm install quill-image-resize-module --save

 2.在组件下面新增组件 QIeditor

3、index.vue代码：

<template>
    <div>
      <div id='quillEditorQiniu'>
        <!-- 基于elementUi的上传组件 el-upload begin-->
        <el-upload class="avatar-uploader" action="" :http-request="uploadimage" :accept="'image/*,video/*'"
          :show-file-list="false" :on-success="uploadEditorSuccess" :before-upload="beforeEditorUpload"
          :headers="headers">
        </el-upload>
        <!-- 基于elementUi的上传组件 el-upload end-->
        <quill-editor class="editor" v-model="content" ref="customQuillEditor" :options="editorOption"
          @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)">
        </quill-editor>
      </div>
    </div>
  </template>
  
  <script>
  import Vue from 'vue'
  import { Quill } from 'vue-quill-editor'
  import { ImageDrop } from 'quill-image-drop-module'
  import ImageResize from 'quill-image-resize-module'
  Quill.register('modules/imageDrop', ImageDrop)
  Quill.register('modules/imageResize', ImageResize)
  import store from '@/store'
  import api from '@/api/fileUploade/file'
  
  
  // 这里引入修改过的video模块并注册
  import Video from './video'
  Quill.register(Video, true)
  
  //获取登录token，引入文件，如果只是简单测试，没有上传文件是否登录的限制的话，
  //   //这个token可以不用获取，文件可以不引入，把上面对应的上传文件携带请求头  :headers="headers" 这个代码删掉即可
  //   import {getToken} from "@/utils/auth"
  
  // 注册text-indent样式属性
  // 确保使用正确的注册方式
  // 确保使用正确的注册方式
  
  const Parchment = Quill.import('parchment')
  
  class TextIndentAttributor extends Parchment.Attributor.Style {
    constructor() {
      super('text-indent', 'text-indent', {
        scope: Parchment.Scope.BLOCK,
        whitelist: ['0', '2em', '4em']
      })
    }
  }
  
  const TextIndentStyle = new TextIndentAttributor()
  Quill.register(TextIndentStyle, true)
  
  
  
  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
    [{'text-indent': ['0', '2em', '4em'] }],  
    [{ 'direction': 'rtl' }],                         // text direction
    [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
    [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
    [{ 'color': [] }, { 'background': [] }],          // dropdown with d