修改问题知识库富文本图片的上传

jero-web/src/views/businessSupport/problemKnowledgeBase/components/problemKnowledgeBaseAdd.vue

@@ -129,6 +129,7 @@
                   </div>
                   <a-form-model-item style="height: 357px" class="itemModel itemModel-explain" prop="content">
                     <quill-editor
+                      ref="myQuillEditor"
                       v-model="formInline.content"
                       style="height: 300px"
                       :content="formInline.content"
@@ -166,6 +167,17 @@
         </div>
       </div>
     </div>
+    <a-upload
+      name="file"
+      id="iviewUp"
+      accept='.png,.jpg,.gif,.jpeg,.pjpeg,.pjp'
+      :multiple="false"
+      :action="uploadAction"
+      :headers="headers"
+      style="width: 0;display: none"
+      @change="handleChange"
+    >
+    </a-upload>
     <JLoading :loading="loading">{{$t('pleaseWaitWhileRunning')}}</JLoading>
     <listAddModel ref="listAddModelRef" @listAddModelForm="listAddModelForm"/>
     <uploadFile ref="uploadFile" @uploadSuccess="uploadSuccess"/>
@@ -181,7 +193,28 @@
   import 'quill/dist/quill.bubble.css'
   import listAddModel from './listAddModel'
   import { quillEditor } from 'vue-quill-editor'
+  import Vue from 'vue'
+  import { ACCESS_TOKEN } from '@/store/mutation-types'
 
+  const toolbarOptions = [
+    ['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', 'video'],
+    ['clean']                                         // remove formatting button
+  ]
   export default {
     name: 'problemKnowledgeBaseAdd',
     components: {
@@ -193,8 +226,28 @@
     data() {
       return {
         formInline: {},
+        headers: '',
+        uploadAction: window._CONFIG['domianURL'] + '/sys/common/upload',
         loading: false,
         problemTypeList: [],
+        editorOption: { // 富文本框配置
+          placeholder: '',
+          theme: 'snow', // or 'bubble'
+          modules: {
+            toolbar: {
+              container: toolbarOptions, // 工具栏
+              handlers: {
+                'image': function(value) {
+                  if (value) {
+                    document.querySelector('.ant-upload input').click()
+                  } else {
+                    this.quill.format('image', false)
+                  }
+                }
+              }
+            }
+          }
+        },
         rules: {
           showPermissions: [
             {
@@ -260,12 +313,13 @@
             name: this.$t('Privacy')
           }
         ],
-        content: '<h2>I am Example</h2>',
-        editorOption: {
-          // Some Quill options...
-        }
+        content: '<h2>I am Example</h2>'
       }
     },
+    created() {
+      const token = Vue.ls.get(ACCESS_TOKEN)
+      this.headers = { 'X-Access-Token': token }
+    },
     computed: {
       editor() {
         return this.$refs.myQuillEditor.quill
@@ -353,6 +407,9 @@
       }
       ,
       onEditorChange({ quill, html, text }) {
+        console.log(html)
+        console.log(quill)
+        console.log(text)
         this.formInline.content = html
       }
       ,
@@ -376,8 +433,25 @@
         this.formInline.standNumber = number
         this.formInline.bussDocumentLibraryId = id
         this.formInline = { ...this.formInline }
-      }
-      ,
+      },
+      handleChange(info) {
+        let { file } = info
+        const status = info.file.status
+        if (status === 'done') {
+          let vm = this
+          let quill = this.$refs.myQuillEditor.quill
+          let length = quill.getSelection().index
+          let fileName = file.response.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/'+file.response.result.id+fileSuffix)
+          quill.setSelection(length + 1)
+          this.quillUpdateImg = false
+        } else if (status === 'uploading') {
+
+        }
+      },
       clickButtonToUpload(item) {
         this.$refs.uploadFile.perentHandleFunc()
         this.$refs.uploadFile.visible = true