Vue2富文本进阶：vue-quill-editor自定义视频上传与移动端适配实战

1. 为什么需要自定义视频上传功能

在Vue2项目中使用vue-quill-editor时，默认的视频上传功能往往无法满足实际业务需求。我遇到过不少项目，客户都提出要支持大文件上传、显示视频封面、适配移动端播放等特殊要求。默认的视频上传功能有几个明显痛点：

首先是上传流程不可控。默认会直接将视频转为base64嵌入到内容中，这种方式对于小文件还行，但遇到几十MB的视频就会导致内容异常臃肿。实测下来，一个5分钟的视频就能让内容体积暴涨到几十MB，严重影响页面加载速度。

其次是缺乏必要的视频控制。默认生成的video标签缺少封面图设置，在移动端经常出现黑屏或者只有播放按钮的情况，用户体验很差。特别是在微信内置浏览器中，各种兼容性问题更是层出不穷。

最后是样式适配问题。PC端看起来正常的视频，到了手机上要么显示不全，要么被拉伸变形。有次客户发来截图质问为什么视频在iPhone上显示异常，排查半天才发现是缺少响应式处理。

2. 环境准备与基础配置

2.1 安装必要依赖

先确保项目已经初始化并安装了Vue2。我推荐使用以下命令安装核心依赖：

bash复制npm install vue-quill-editor quill --save
npm install quill-image-resize-module quill-image-drop-module --save-dev

这里有个坑要注意：如果直接安装vue-quill-editor出现"Cannot read property 'imports' of undefined"错误，多半是quill版本兼容问题。我建议显式安装quill作为主依赖，而不是让它作为vue-quill-editor的子依赖。

2.2 全局配置编辑器

在main.js中需要完成三件事：注册Quill组件、加载CSS样式、配置图片处理模块：

javascript复制import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

// 图片处理模块
import ImageResize from 'quill-image-resize-module'
import { ImageDrop } from 'quill-image-drop-module'
Quill.register('modules/imageResize', ImageResize)
Quill.register('modules/imageDrop', ImageDrop)

Vue.use(VueQuillEditor)

在vue.config.js中还需要添加webpack配置，避免运行时出现Quill未定义的问题：

javascript复制const webpack = require('webpack')
module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        'window.Quill': 'quill/dist/quill.js',
        'Quill': 'quill/dist/quill.js'
      })
    ]
  }
}

3. 编辑器基础使用与样式调整

3.1 基本组件集成

在页面中使用编辑器时，建议封装成独立组件。这是我常用的基础配置：

html复制<template>
  <div class="editor-container">
    <quill-editor
      ref="myQuillEditor"
      v-model="content"
      :options="editorOption"
      class="my-quill-editor"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: '',
      editorOption: {
        placeholder: '请输入内容...',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline'],
            ['blockquote', 'code-block'],
            [{ header: 1 }, { header: 2 }],
            ['link', 'image', 'video']
          ],
          imageResize: {
            displayStyles: {
              backgroundColor: 'transparent'
            }
          }
        }
      }
    }
  }
}
</script>

3.2 响应式样式处理

移动端适配需要特别注意两点：图片大小和编辑器高度。这是我总结的CSS方案：

css复制/* 基础编辑器样式 */
.ql-editor {
  min-height: 300px;
  background: #fff;
}

/* PC端样式 */
@media (min-width: 768px) {
  .ql-editor img,
  .ql-editor vid