在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='beforeUpload' :data="uploadData" :on-success='upScuccess'
      ref="upload" style="display:none">
      <el-button size="small" type="primary" id="imgInput" v-loading.fullscreen.lock="fullscreenLoading" element-loading-text="插入中,請稍候">點擊上傳</el-button>
    </el-upload>
    </el-table>
  </div>
</template>

 

 

CSS部分：

.quill-editor {
  height: 745px;

  .ql-container {
    height: 680px;
  }
}

.limit {
  height: 30px;
  border: 1px solid #ccc;
  line-height: 30px;
  text-align: right;

  span {
    color: #ee2a7b;
  }
}

.ql-snow .ql-editor img {
  max-width: 480px;
}

.ql-editor .ql-video {
  max-width: 480px;
}

 

 JS部分：

 

import Vue from 'util/vueExt'
import { Component } from 'vue-property-decorator'
import * as Template from './editor.vue'
import * as Quill from 'quill'    // 引入編輯器

const STATICDOMAIN = '//ss.yidejia.com/'
const STATVIDEO = '//flv.yidejia.com/'

@Component({
  mixins: [Template]
})
export default class Editor extends Vue {
  content = ''    // 文章內容
  editorOption = {}    // 編輯器選項
  addRange: any = new Array()
  uploadData = {}
  photoUrl = ''         // 上傳圖片地址
  uploadType = ''    // 上傳的文件類型（圖片、視頻）
  fullscreenLoading = false

  $refs: {
    myQuillEditor: any,
    imgInput: any
  }

  get nowLength() {
    return this.content.length
  }

  get SurplusLength() {   // 計算屬性 獲得當前輸入字符長度
    let num = 10000 - Number(this.content.length)
    if (num > 0) {
      return num
    } else {
      return 0
    }
  }

  // 上傳七牛的actiond地址
  get qnLocation() {
    if (location.protocol === 'http:') {
      return 'http://up-z0.qiniu.com'
    }
    return 'https://up-z0.qbox.me'
  }

  // 圖片上傳前獲得數據token數據
  qnUpload(file) {
    this.fullscreenLoading = true
    const suffix = file.name.split('.')
    const ext = suffix.splice(suffix.length - 1, 1)[0]
    console.log(this.uploadType)
    if (this.uploadType === 'image') {  // 如果是點擊插入圖片
      return this.api.getQNToken().then(res => {
        this.uploadData = {
          key: `image/${suffix.join('.')}_${new Date().getTime()}.${ext}`,
          token: res
        }
      })
    } else if (this.uploadType === 'video') {  // 如果是點擊插入視頻
      return this.api.getVideoQNToken().then(res => {
        this.uploadData = {
          key: `video/${suffix.join('.')}_${new Date().getTime()}.${ext}`,
          token: res
        }
      })
    }
  }

  // 圖片上傳之前調取的函數
  beforeUpload(file) {
    return this.qnUpload(file)
  }

  // 圖片上傳成功回調   插入到編輯器中
  upScuccess(e, file, fileList) {
    this.fullscreenLoading = false
    let vm = this
    let url = ''
    if (this.uploadType === 'image') {    // 獲得文件上傳后的URL地址
      url = STATICDOMAIN + e.key
    } else if (this.uploadType === 'video') {
      url = STATVIDEO + e.key
    }
    if (url != null && url.length > 0) {  // 將文件上傳后的URL地址插入到編輯器文本中
      let value = url
      vm.addRange = vm.$refs.myQuillEditor.quill.getSelection()
      value = value.indexOf('http') !== -1 ? value : 'http:' + value
      vm.$refs.myQuillEditor.quill.insertEmbed(vm.addRange !== null ? vm.addRange.index : 0, vm.uploadType, value, Quill.sources.USER)   // 調用編輯器的 insertEmbed 方法，插入URL
    } else {
      (<any>this).$message.error(`${vm.uploadType}插入失敗`)
    }
    this.$refs['upload'].clearFiles()    // 插入成功后清除input的內容
  }

  // 點擊圖片ICON觸發事件
  imgHandler(state) {
    this.addRange = this.$refs.myQuillEditor.quill.getSelection()
    if (state) {
      let fileInput = document.getElementById('imgInput')
      fileInput.click() // 加一個觸發事件
    }
    this.uploadType = 'image'
  }

  // 點擊視頻ICON觸發事件
  videoHandler(state) {
    this.addRange = this.$refs.myQuillEditor.quill.getSelection()
    if (state) {
      let fileInput = document.getElementById('imgInput')
      fileInput.click() // 加一個觸發事件
    }
    this.uploadType = 'video'
  }

  // 編輯器光標離開 將編輯器內容發射給父組件
  onEditorBlur(editor) {
    this.$emit('getValue', this.content)
  }

  // 編輯器獲得光標
  onEditorFocus(editor) {
    editor.enable(true)   // 實現達到上限字符可刪除
  }

  // 編輯器文本發生變化
  onEditorChange({ editor, html, text }) {
    let textLength = text.length
    if (textLength > 10000) {
      (<any>this).$message.error('最多輸入10000個字符')
      editor.enable(false)
    }
    this.$emit('getValue', this.content)
  }

  // 清除編輯器內容
  callMethod() {
    this.content = ''
  }

  // 頁面加載后執行 為編輯器的圖片圖標和視頻圖標綁定點擊事件
  mounted() {
    // 為圖片ICON綁定事件  getModule 為編輯器的內部屬性
    this.$refs.myQuillEditor.quill.getModule('toolbar').addHandler('image', this.imgHandler)
    this.$refs.myQuillEditor.quill.getModule('toolbar').addHandler('video', this.videoHandler)  // 為視頻ICON綁定事件
  }
}

 

 

vue-quill-editor API文檔地址