vue项目引入富文本编辑，图片上传/视频上传

Falling snow

已于 2022-12-08 15:09:50 修改

阅读量1.9k

点赞数 1

分类专栏： element-ui 文章标签： vue.js 音视频 javascript

于 2022-12-06 10:47:53 首次发布

本文链接：https://blog.youkuaiyun.com/snowflak/article/details/128198162

版权

本文档详细介绍了如何在Vue项目中引入富文本编辑器vue-quill-editor，并实现图片大小调整功能。同时，文章还涵盖了视频上传的配置，通过video.js接入，以及在组件和父组件中的应用步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1：下载富文本和更改图片大小

npm install quill-image-resize-module --save//更改img图片大小
npm install vue-quill-editor –save//下载富文本编辑

2：在main.js中引入

import  VueQuillEditor from 'vue-quill-editor'//编辑器
// 样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor)

3：在vue.config.js中配置

module.exports = {
   
configureWebpack: {
   
plugins: [
      new webpack.ProvidePlugin({
   
        "window.Quill": "quill/dist/quill.js",
         Quill: "quill/dist/quill.js",
      }),
      ]
}
}

4.视频接入 video.js

import Quill from "quill";

const BlockEmbed = Quill.import('blots/block/embed')
class VideoBlot extends BlockEmbed {
   
  static create (value) {
   
    let node = super.create()
    node.setAttribute('src', value.url)
    node.setAttribute('controls', value.controls)
    node.setAttribute('width', value.width)
    node.setAttribute('height', value.height)
    node.setAttribute('webkit-playsinline', true)
    node.setAttribute('playsinline', true)
    node.setAttribute('x5-playsinline', true)
    return node;
  }
 
  static value (node) {
   
    return {
   
      url: node.getAttribute('src'),
      controls: node.getAttribute('controls'),
      width: node.getAttribute('width'),
      height: node.getAttribute('height')
    };
  }
}
VideoBlot.blotName = 'video'
VideoBlot.tagName = 'video'
VideoBlot.className = 'ql-video'
export default VideoBlot;

5：在组件中编写

<template>
    <div>
        <!-- 图片上传组件辅助 -->
        <el-upload :action="uploadImgUrl" ref="uploadFileImage" :data="imgCol" :before-upload="handleBeforeUpload"
            :on-success="handleUploadSuccess" :on-error="uploadError" name="file" :show-file-list="false"
            :headers="headers" style="display: none" />
             <!--视频上传组件辅助 -->
        <el-upload :action="uploadImgUrl" ref="uploadFileVideo" :data="imgColVideo"
            :before-upload="handleBeforeUploadVideo" :on-success="handleUploadSuccessVideo"
            :on-error="handleUploadErrorVideo" name="file" :show-file-list="false" :headers="headers"
            style="display: none" />
        <!