jsm-mall-front/src/components/v-quill-editor/index.vue

<template>
  <div>
    <div style="height: 0px; overflow: hidden">
      <fileUpload v-if="showFileUpload" :multiple="true" :limit="10000" :uid="uid" @getFiles="getFiles" />
    </div>
    <quill-editor
      v-model="center"
      ref="myQuillEditor1"
      :options="options"
      @focus="onEditorFocus($event)"
    ></quill-editor>
  </div>
</template>

<script>
const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],
  ['blockquote', 'code-block'],
  [{ header: 1 }, { header: 2 }],
  [{ list: 'ordered' }, { list: 'bullet' }],
  [{ script: 'sub' }, { script: 'super' }],
  [{ indent: '-1' }, { indent: '+1' }],
  [{ direction: 'rtl' }],
  [{ size: ['small', false, 'large', 'huge'] }],
  [{ header: [1, 2, 3, 4, 5, 6, false] }],
  [{ color: [] }, { background: [] }],
  [{ font: [] }],
  [{ align: [] }],
  ['link', 'image', 'video']
]
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import fileUpload from '@/components/file-upload'
import uploadFile from '@/utils/upload-file.js'
export default {
  name: 'v-quill-editor',
  components: { quillEditor, fileUpload },
  props: {
    value: {
      type: [String, Number, Object, Array],
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      uid: `class_${Math.random().toFixed(6).slice(-6)}`,
      showFileUpload: true,
      editorImages: [],
      center: this.value,
      options: {
        placeholder: '请输入内容',
        theme: 'snow',
        modules: {
          toolbar: {
            container: toolbarOptions,
            handlers: {
              image: value => {
                if (value) {
                  document.querySelector(`.${this.uid} input`).click()
                }
              }
            }
          },
          clipboard: {}
        }
      }
    }
  },
  watch: {
    value() {
      this.center = this.value
    },
    center() {
      this.$emit('input', this.center)
    }
  },
  mounted() {
    //  自定义粘贴图片功能
    let quill = this.$refs.myQuillEditor1.quill
    quill.root.addEventListener(
      'paste',
      evt => {
        if (evt.clipboardData && evt.clipboardData.files && evt.clipboardData.files.length) {
          evt.preventDefault()
          ;[].forEach.call(evt.clipboardData.files, file => {
            if (!file.type.match(/^image\/(gif|jpe?g|a?png|bmp)/i)) {
              return
            }
            uploadFile(file, data => {
              let length = quill.getSelection().index
              quill.insertEmbed(length, 'image', this.$imageUrl + data.aliyunAddress)
              quill.setSelection(length + 1)
            })
          })
        }
      },
      false
    )
  },
  methods: {
    getFiles(fileList) {
      fileList.forEach(item => {
        this.editorImages.push(item.url)
      })
      this.showFileUpload = false
      this.$nextTick(() => {
        this.showFileUpload = true
      })
      this.showImage1()
    },
    showImage1() {
      let quill = this.$refs.myQuillEditor1.quill
      this.editorImages.forEach(item => {
        let length = quill.getSelection().index
        quill.insertEmbed(length, 'image', item)
        quill.setSelection(length + 1)
      })
      this.editorImages = []
    },
    onEditorFocus(event) {
      if (this.disabled) {
        event.enable(false)
      }
      event.enable(true)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .edit_container {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
::v-deep .ql-editor {
  height: 400px;
}
</style>