修改问题知识库的富文本粘贴图片

2022-09-16 09:07:39 +08:00
parent 2d8d4cd777
commit 743e54d665
1 changed files with 47 additions and 3 deletions
@@ -195,6 +195,7 @@
  import { quillEditor } from 'vue-quill-editor'
  import Vue from 'vue'
  import { ACCESS_TOKEN } from '@/store/mutation-types'
+  import axios from 'axios'

  const toolbarOptions = [
    ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
@@ -236,7 +237,7 @@
          modules: {
            clipboard: {
              // 粘贴版，处理粘贴时候带图片
-              matchers: [[Node.ELEMENT_NODE, this.handleCustomMatcher]],
+              matchers: [[Node.ELEMENT_NODE, this.handleCustomMatcher]]
            },
            toolbar: {
              container: toolbarOptions, // 工具栏
@@ -337,6 +338,49 @@
      } else {
        document.title = this.$t('problemKnowledgeBase') + this.$t('newlyAdded')
      }
+      let quill = this.$refs.myQuillEditor.quill
+      this.$forceUpdate()
+      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
+              }
+              const formData = new FormData()
+              formData.append('file', file)
+              axios({
+                url: this.uploadAction,
+                method: 'post',
+                data: formData,
+                headers: {
+                  'Content-Type': 'multipart/form-data',
+                  'X-Access-Token': Vue.ls.get(ACCESS_TOKEN)
+                }
+              })
+                .then((res) => {
+                  if (res.data.success){
+                    let quill = this.$refs.myQuillEditor.quill
+                    let length = quill.getSelection().index
+                    let fileName = res.data.result.fileName
+                    let index1 = fileName.lastIndexOf('.')
+                    let index2 = fileName.length
+                    let fileSuffix = fileName.substring(index1, index2)
+                    quill.insertEmbed(length, 'image', window._CONFIG['domianPreviewURL'] + '/sys/common/download/' + res.data.result.id + fileSuffix)
+                    quill.setSelection(length + 1)
+                  }
+                })
+            })
+          }
+        },
+        false
+      )
    },
    methods: {
      quilleditorBlur() {
@@ -347,7 +391,7 @@
        Delta.ops.forEach(op => {
          if (op.insert && typeof op.insert === 'string') {// 如果粘贴了图片，这里会是一个对象，如果是字符串则可以添加
            ops.push({
-              insert: op.insert,
+              insert: op.insert
            })
          }
        })
@@ -461,7 +505,7 @@
          let index1 = fileName.lastIndexOf('.')
          let index2 = fileName.length
          let fileSuffix = fileName.substring(index1, index2)
-          quill.insertEmbed(length, 'image', window._CONFIG['domianPreviewURL']+'/sys/common/download/'+file.response.result.id+fileSuffix)
+          quill.insertEmbed(length, 'image', window._CONFIG['domianPreviewURL'] + '/sys/common/download/' + file.response.result.id + fileSuffix)
          quill.setSelection(length + 1)
          this.quillUpdateImg = false
        } else if (status === 'uploading') {