vue-quill-editor 自定义图片上传和视频上传

安装

npm install vue-quill-editor --save

在main.js  引入

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

在页面中引入

// 页面引入

import { quillEditor,Quill } from 'vue-quill-editor'

import Video from '../../../utils/video'

Quill.register(Video, true)

// 配置项

  editorOption: {

         modules:{

             toolbar:{

                container: [

                    ['bold', 'italic', 'underline', 'strike'], //加粗，斜体，下划线，删除线

                    [{ 'header': 1 }, { 'header': 2}], // 标题，键值对的形式；1、2表示字体大小

                    [{'list': 'ordered'}, {'list': 'bullet'}], //列表

                    [{ 'script': 'sub'}, {'script': 'super' }], // 上下标

                    [{ 'indent': '-1'}, {'indent': '+1'}], // 缩进

                    [{'direction': 'rtl' }], // 文本方向

                    ['clean'], //清除字体样式

                    ['image', 'video'] //上传图片、上传视频

                ],

                handlers: {

                  'video':(val)=>{

                    // 覆盖默认的上传视频

　　　　　　　　　　　　this.onVideo();

                  },

                  'image':(value)=>{

　　　　　　　　　　　　// 覆盖默认的图片上传

　　　　　　　　　　　　// 获取光标所在的位置

                    var range = this.$refs.myQuillEditor.quill.getSelection();

                    if (range == null) {

                      this.indexVideo = 0;

                    } else {

                      this.indexVideo = range.index;

                    }

　　　　　　　　　　　　// 点击隐藏的上传表单

                    if (value) {

                       document.querySelector('.avataruploaderTip input').click()

                    } else {

                      this.quill.format('image', false)

                    }

                  }

                }

             }

         },

         placeholder:'请输入'

    },

   // 相关变量

   indexVideo:0,

   videoUrl:'',

   videoTab:{

     tabUrl:true,

     tabUpd:false

   },

   videoProgress:false,

 

  // 声明组件

  components: {

     quillEditor

  },

// 富文本相关

    onVideo(){

        this.videoFlag = true;

         //当编辑器中没有输入文本时，这里获取到的 range 为 null   获取光标位置

        var range = this.$refs.myQuillEditor.quill.getSelection();

        if (range == null) {

          this.indexVideo = 0;

        } else {

          this.indexVideo = range.index;

        }

    },

    onVideoTab(val){  // 链接与视频上传 tab切换

      if(val == 1){

        this.videoTab.tabUrl = true;

        this.videoTab.tabUpd = false;

      }else{

        this.videoTab.tabUpd = true;

        this.videoTab.tabUrl = false;

      }

    },

    //上传视频

    uploadVideoTip(param){

       const formData = new FormData()

       formData.append('file', param.file)

       this.videoProgress = true;

       fetchUploadVideo(formData).then(response => {

            this.videoForm.showVideoPath = response.videoUrl;

　　　　　　　// 获取富文本

            let quill = this.$refs.myQuillEditor.quill

　　　　　　　// 在光标所在位置 插入视频

            quill.insertEmbed(this.indexVideo,'video', this.videoForm.showVideoPath)

            quill.setSelection(this.indexVideo + 1)

            this.videoProgress = false;

            this.videoFlag = false;

        });

    },

    // 上传图片链接

    upVideoUrl(){

      if(this.videoUrl){

         let quill = this.$refs.myQuillEditor.quill

         quill.insertEmbed(this.indexVideo,'video', this.videoUrl)

         quill.setSelection(this.indexVideo + 1)

         this.videoFlag = false;

      }else{

        this.$message({

            message: '请填写视频链接',

            type: 'warning'

        });

      }

    },

　　// 图片上传

    uploadImgTip(param){

       const formData = new FormData()

       formData.append('file', param.file)

       fetchImg(formData).then(response => {

          let url = response.imgUrl

           let quill = this.$refs.myQuillEditor.quill

　　　　　　// 插入图片链接

           quill.insertEmbed(this.indexVideo, 'image', url)

           quill.setSelection(this.indexVideo + 1)

        });

    },

  }

 

// 隐藏图片上传表单

     <el-upload  

        class="avataruploaderTip"

        ref="uploadtip"

        :limit="999"

        action="#"

        :show-file-list="false"

        :http-request="uploadImgTip"

        >

      </el-upload>

// 视频上传弹出框

  <el-dialog

      title="视频上传"

      :visible.sync="videoFlag"

      :close-on-click-modal="false"

      class="editerV"

      width="500px">

      <div class="editerVideo">

         <div class="editerVideo_title">

           <div :class="['editerVideo_title_item',videoTab.tabUrl?'editerVideo_title_act':''] " @click="onVideoTab(1)">添加链接</div>

           <div :class="['editerVideo_title_item',videoTab.tabUpd?'editerVideo_title_act':''] " @click="onVideoTab(2)">上传视频</div>

         </div>

         <div class="editerVideo_main">

            <div class="editerVideo_main_url" v-if="videoTab.tabUrl">

              <div>视频地址：</div>

              <el-input size="small" v-model="videoUrl" style="width:300px"></el-input>

              <el-button  type="primary"  style=" margin-left:10px;  height:30px" @click="upVideoUrl" size="small" >添加</el-button>

            </div>

            <div v-if="videoTab.tabUpd">

                <div v-if="videoProgress" class="videoProgress">视频上传中，请耐心等待！</div>

                <el-upload

                  v-else

                  class="avatar-uploader_video"

                  :limit=1

                  action="#"

                  :show-file-list="false"

                  :http-request="uploadVideoTip"

                >

                  <i class="el-icon-plus avatar-uploader-videoiocn"></i>

                </el-upload>

               

            </div>

         </div>

      </div>

  </el-dialog>

// 视频上传组件

.editerV /deep/ .el-dialog__body{

  padding: 0px 20px 20px 20px;

}

.editerVideo{

  width: 100%;

}

.editerVideo_title{

  display: flex;

  height: 30px;

  line-height: 30px;

  width: 100%;

  color: #1f2f3d;

  font-weight: bold;

  justify-content: flex-start;

  border-bottom: 2px solid #DCDFE6;

}

.editerVideo_title_act{

  color: #409eff;

  border-bottom: 2px solid #409eff;

  margin-bottom: -2px;

}

.editerVideo_title_item{

  margin-right: 10px;

}

.editerVideo_main{

  width: 100%;

  height: 120px;

}

.editerVideo_main_url{

  width: 100%;

  height: 200px;

  line-height: 30px;

  display: flex;

  flex-direction: row;

  justify-content:flex-start;

  margin-top: 35px;

}

.avatar-uploader_video{

  width: 100px;

  height: 100px;

  border: 1px solid #D9D9D9;

  display: flex;

  justify-content: center;

  align-items: center;

  margin-top: 30px;

}

.avatar-uploader-videoiocn {

  font-size: 28px;

  color: #D9D9D9;

  line-height: 90px;

  text-align: center;

}

.videoProgress{

  margin-top: 30px;

}

.quillWidthmain{

  width: 800px;

  height:320px;

}

.quillWidth{

  width:800px;

  height:270px;

}

 

video.js

import { Quill } from 'vue-quill-editor'
// 源码中是import直接倒入，这里要用Quill.import引入
const BlockEmbed = Quill.import('blots/block/embed')
const Link = Quill.import('formats/link')

const ATTRIBUTES = ['height', 'width']

class Video extends BlockEmbed {
  static create (value) {
    const node = super.create(value)
    // 添加video标签所需的属性
    node.setAttribute('controls', 'controls')
    node.setAttribute('type', 'video/mp4')
    node.setAttribute('src', this.sanitize(value))
    return node
  }
  static formats (domNode) {
    return ATTRIBUTES.reduce((formats, attribute) => {
      if (domNode.hasAttribute(attribute)) {
        formats[attribute] = domNode.getAttribute(attribute)
      }
      return formats
    }, {})
  }

  static sanitize (url) {
    return Link.sanitize(url) // eslint-disable-line import/no-named-as-default-member
  }

  static value (domNode) {
    return domNode.getAttribute('src')
  }

  format (name, value) {
    if (ATTRIBUTES.indexOf(name) > -1) {
      if (value) {
        this.domNode.setAttribute(name, value)
      } else {
        this.domNode.removeAttribute(name)
      }
    } else {
      super.format(name, value)
    }
  }
  html () {
    const { video } = this.value()
    return `<a href="${video}">${video}</a>`
  }
}
Video.blotName = 'video' //不用iframe，直接替换掉原来，如果需要也可以保留原来的，这里用个新的blot
Video.className = 'ql-video'
Video.tagName = 'video' // 用video标签替换iframe
export default Video