vue-quill-editor 自定義圖片上傳調整圖片大小保存時刪除服務器多餘圖片

下載 vue-quill-editor

npm install vue-quill-editor --save

引入

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
import Quill from 'quill'

標籤

<quill-editor
      v-model="content"
      style="height:100%;"
      ref="myQuillEditor"
      :options="editorOption"
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @ready="onEditorReady($event)"
      @change="onEditorChange($event)"
    ></quill-editor>

js

export default {

　　name: 'QuillEditor',

　　components: {

　　　　quillEditor

　　},

　　props: {

　　　　value: {

　　　　　　type: String

　　　　　　　　}

　　　　　　},

　　data() {

　　　　return {

　　　　　　content: null,

　　　　　　editorOption: {

　　　　　　　　// some quill options

　　　　　　}

　　　　}

　　

　　methods: {

　　 onEditorBlur(quill) {
      console.log('editor blur!', quill)
    },
    onEditorFocus(quill) {
      console.log('editor focus!', quill)
    },
    onEditorReady(quill) {
      console.log('editor ready!', quill)
    },
    onEditorChange({ quill, html, text }) {
      console.log('editor change!', quill, html, text)
      this.$emit('change', html)//實時返回內容
    }
}
}

自定義圖片上傳

//外掛一個隱藏的圖片上傳插件
<div style="display:none;">
      <a-upload
        name="file"
        listType="picture-card"
        class="avatar-uploader"
        :showUploadList="false"
        @change="handleChange"
        :action="action"
        :headers="headers"
        :data="data"
      >
        <div ref="aUpload">
          <a-icon type="plus" />
          <div class="ant-upload-text">Upload</div>
        </div>
      </a-upload>
 </div>

富文本編輯器配置也須要改一個

created() {
    let vm = this
    const modules = {
      toolbar: {
        container: [
  　　　　　　['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
            [{ direction: 'rtl' }], // text direction
            [{ size: ['small', false, 'large', 'huge'] }], // custom dropdown
            [{ header: [1, 2, 3, 4, 5, 6, false] }],
            [{ color: [] }, { background: [] }], // dropdown with defaults from theme
            [{ font: [] }],
            [{ align: [] }],
            ['link', 'image'],
            ['clean'] // remove formatting button
        ],
        handlers: {
          image: function(value) {
            debugger
            vm.$refs.aUpload.click() //自定義圖片上傳回調
          }
        }
      }
    }
    vm.editorOption.modules = modules
  },

vm.$refs.aUpload.click()  觸發圖片插件點擊事件

圖片插件的handleChange會載入圖片數據

handleChange(info) {
      let { file } = info
      if (file.status == 'done') {
　　　　　//圖片上傳成功後返回值
        let url =file.response.data.filePathName
        let quill = this.$refs.myQuillEditor.quill
        let length = quill.getSelection().index　//獲取當前鼠標焦點位置
        quill.insertEmbed(length, 'image', url)//插入<img src='url'/> 
　　　　　quill.setSelection(length + 1) } } //鼠標焦點位置
}

這裏圖片自定義插入已經完成！

可是圖片不能隨意改變大小，使用起來體驗不好

下載quill-image-resize-module

npm install quill-image-resize-module --save

導入

....
import ImageResize from 'quill-image-resize-module' //調節圖片大小
Quill.register('modules/imageResize', ImageResize)

vue.config.js

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

vm.editorOption.modules 也要修改

const modules = {
    ......
      imageResize: {
        displayStyles: {
          backgroundColor: 'black',
          border: 'none',
          color: 'white'
        },
        modules: ['Resize', 'DisplaySize', 'Toolbar']
      }
    ......
}

 

 效果

而後又有一個問題，用戶若是一直載入圖片而後刪除圖片會形成服務器大量沒用圖片，因此最好每次操做完把沒用的圖片刪除
在圖片上傳返回能夠把id加到圖片src後面？id=xxx

//獲取富文本因此圖片的id和被刪除圖片id
const getRemovImgId = (ids, html) => {
  let dom = document.createElement('DIV')
  dom.innerHTML = html
  const imgDom = dom.getElementsByTagName('img')
  const url = window.location.host
  const arr=[]
  for (let i = 0; i < imgDom.length; i++) {
    if (imgDom[i].src.indexOf(url) > -1) {
      let reg = new RegExp('(^|&)id=([^&]*)(&|$)')
      let r = imgDom[i].src.split('?')[1].match(reg)
      let id=unescape(r[2])
      ids.splice(ids.indexOf(id),1)
      arr.push(id)
    }
  }
  return {
    removeIds:ids,
    imgIds:arr
  }
}

export default {
  name: 'QuillEditor',
     data() {
        return {
          ......
          imgIds: [],//全部圖片id
          removeIds:[],//被刪除圖片id
          ......
        }  
......
    methods:{
        ......
        onEditorChange({ quill, html, text }) {
            console.log('editor change!', quill, html, text)
            this.$emit('change', html)
            const ids=getRemovImgId(this.imgIds,html)
            this.imgIds=ids.imgIds
            this.removeIds=[...this.removeIds,...ids.removeIds]
            console.log(this.imgIds)
            console.log(this.removeIds)
         },
        //保存富文本成功後調用刪除多餘圖片
         removeImg(){
            if(this.removeIds.length==0)return
            imageDelete(this.removeIds.join(','))//刪除圖片
          },
         ......
    }
}