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(','))//删除图片
          },
         ......
    }
}