tinymce 编辑器中添加图片上传功能

src/api/file.js

@@ -1,7 +1,8 @@
-import { post } from '@/utils/request'
+import {post, postForm} from '@/utils/request'
 
 const fileApi = {
   ossServerApi: '/api/file/oss/serverinfo',
+  ossUploadApi: '/api/file/upload',
   ossStsApi: '/api/file/aliyun/sts_token',
   ossSignedUrlApi: '/api/file/aliyun/signed_url'
 }
@@ -29,3 +30,7 @@ export function getStsToken() {
 export function getSignedUrl(data) {
   return post(fileApi.ossSignedUrlApi, data)
 }
+
+export function uploadFile(payload) {
+  return postForm(fileApi.ossUploadApi, payload)
+}

src/utils/request.js

@@ -98,6 +98,14 @@ export function post(url, data) {
   })
 }
 
+export function postForm(url, formData) {
+  return instance({
+    method: 'post',
+    url,
+    data: formData
+  })
+}
+
 export function put(url, data) {
   return instance({
     method: 'put',

src/views/exam/ExamQuestionAdd.vue

@@ -51,7 +51,7 @@
                               type="textarea"
                               :rows="5"
                             />-->
-              <editor id="tinymce" v-model="addQuForm.questionContent" :init="init"></editor>
+              <editor id="tinymce" v-model="addQuForm.questionContent" :init="init" />
             </el-form-item>
             <el-form-item label="试题解析" label-width="120px" prop="analysis">
               <el-input
@@ -292,11 +292,15 @@
 </template>
 
 <script>
-import { getSubjectKV, addQuestion } from '@/api/exam'
 import tinymce from 'tinymce/tinymce'
 import 'tinymce/themes/silver/theme'
+import 'tinymce/plugins/image'
+import 'tinymce/plugins/code'
 import Editor from '@tinymce/tinymce-vue'
 
+import { getSubjectKV, addQuestion } from '@/api/exam'
+import {uploadFile} from "@/api/file";
+
 export default {
   name: 'ExamQuestionAdd',
   components: { Editor },
@@ -314,11 +318,29 @@ export default {
         mathjax: {
           lib: '/tinymce/mathjax/tex-mml-chtml.js'
         },
-        // plugins: 'link lists image code table colorpicker textcolor wordcount contextmenu',
-        toolbar: 'mathjax | bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat',
-        branding: false
+        plugins: 'image code',
+        toolbar: 'mathjax bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | image code | removeformat',
+        branding: false,
+        images_upload_handler: function(blobInfo, success, failure) {
+          // base64转本地上传
+          // 这个函数主要处理word中的图片，并自动完成上传；
+          // 自己定义的一个函数；在回调中，记得调用success函数，传入上传好的图片地址；
+          // blobInfo.blob() 得到图片的file对象；
+          const file = blobInfo.blob()
+          const formData = new FormData()
+          formData.append('file', file)
+          uploadFile(formData).then(resp => {
+            if (resp.code === 0) {
+              success(resp.data.url)
+            } else {
+              failure(resp.msg)
+            }
+          }).catch(err => {
+            failure(err)
+          }).finally(() => {
+          })
+        }
       },
-      uploadImageUrl: '/',
       // 试题类型
       questionType: [
         {