编辑markdown文档是上传图片并回显

src/api/upload-api.js

@@ -111,5 +111,13 @@ export default {
         return qs.stringify(params, { arrayFormat: 'repeat' })
       }
     })
-  }
+  },
+  // 上传文档里的图片
+  uploadImage: function(data) {
+    return request({
+      url: 'upload-markdown-image',
+      method: 'post',
+      data: data
+    })
+  },
 }

src/utils/request.js

@@ -14,7 +14,6 @@ const service = axios.create({
 service.interceptors.request.use(
   config => {
     // do something before request is sent
-
     if (store.getters.token) {
       // let each request carry token
       // ['X-Token'] is a custom headers key

src/views/markdown/index.vue

@@ -18,6 +18,8 @@
         :style="{'height': clientHeight+'px'}"
         :imageFilter="imageFilter"
         @save="save"
+        @imgAdd="$imgAdd"
+        @imgDel="$imgDel"
       />
     </el-main>
   </div>
@@ -25,6 +27,7 @@
 
 <script>
   import markdownApi from '@/api/markdown-api'
+  import uploadApi from '@/api/upload-api'
   export default {
     data() {
       return {
@@ -53,12 +56,36 @@
       }
     },
     methods: {
+      $imgAdd(pos, $file) {
+        // 第一步.将图片上传到服务器.
+        console.log('pos',pos,'$file',$file)
+        let data = new FormData();
+        data.append('filename', this.filename)
+        data.append('username', this.$store.state.user.name)
+        data.append('userId', this.$store.state.user.userId);
+        data.append('file', $file);
+        uploadApi.uploadImage(data).then((res) => {
+          // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
+          /**
+           * $vm 指为mavonEditor实例，可以通过如下两种方式获取
+           * 1. 通过引入对象获取: `import {mavonEditor} from ...` 等方式引入后，`$vm`为`mavonEditor`
+           * 2. 通过$refs获取: html声明ref : `<mavon-editor ref=md ></mavon-editor>，`$vm`为 `this.$refs.md`
+           */
+          const url = process.env.VUE_APP_BASE_FILE_API + '/public/image/' + res.data
+          console.log(url)
+          this.$refs.md.$img2Url(pos, url);
+        })
+      },
+      $imgDel() {
+
+      },
       // 所有操作都会被解析重新渲染
       change(value, render){
+        console.log('value',value)
         // render 为 markdown 解析后的结果[html]
         this.html = render;
       },
-      save() {
+      save(){
         if(this.editStatus){
           this.update()
         }else{
@@ -71,6 +98,7 @@
       },
       // add
       add(){
+        console.log("this.content",this.content)
         this.adding = true
         if(this.filename){
           const filename = this.filename + ".md"

src/views/public/p/index.vue

@@ -2,39 +2,22 @@
   <div>
     <al-back-top></al-back-top>
     <div class="content">
-
       <el-row :gutter="0">
-        <el-col :xs="0" :sm="1" :md="3" :lg="5" :xl="6"><div>{{leftContent}}d</div></el-col>
+        <el-col :xs="0" :sm="1" :md="3" :lg="5" :xl="6"><div style="color: white">c</div></el-col>
         <el-col :xs="24" :sm="22" :md="18" :lg="14" :xl="12">
           <el-main>
             <mavon-editor
               v-if="!showList"
               v-model="content"
               :subfield="false"
-              :boxShadow="false"
+              :boxShadow="true"
+              :toolbarsFlag="false"
               defaultOpen="preview"
-              :navigation="toolbarsFlag"
-              :toolbarsFlag="toolbarsFlag"
-              :toolbars="toolbars"
-              :style="{'height': clientHeight+'px'}"
-              @navigationToggle="navigationToggle"
             />
           </el-main>
         </el-col>
         <el-col :xs="0" :sm="1" :md="3" :lg="5" :xl="6"></el-col>
       </el-row>
-      <!--{{content}}-->
-      <!--<mavon-editor-->
-        <!--v-if="!showList"-->
-        <!--v-model="content"-->
-        <!--:subfield="false"-->
-        <!--:boxShadow="false"-->
-        <!--defaultOpen="preview"-->
-        <!--:navigation="toolbarsFlag"-->
-        <!--:toolbarsFlag="toolbarsFlag"-->
-        <!--:toolbars="toolbars"-->
-        <!--@navigationToggle="navigationToggle"-->
-      <!--/>-->
     </div>
   </div>
 </template>
@@ -46,16 +29,11 @@
     components: { AlBackTop },
     data() {
       return {
-        leftContent: '',
-        backTopTarget: ".content",
         showList: true,
-        toolbars:{
-          navigation: true,
-        },
+        toolbars: null,
         toolbarsFlag: true,
         content:'',
         html:'',
-        clientHeight: document.documentElement.clientHeight - 155,
       }
     },
     mounted() {
@@ -63,10 +41,6 @@
         this.showList = false
       }
       this.getMarkDown()
-      const that = this
-      window.onresize = function temp() {
-        that.clientHeight = document.documentElement.clientHeight - 155
-      }
     },
     methods: {
       onScroll() {
@@ -79,11 +53,8 @@
           this.content = res.data.contentText
           const _this = this
           setTimeout(function () {
-            _this.backTopTarget = ".v-note-wrapper .markdown-body"
-
             if (document.cookie.match(/scrollTop=([^;]+)(;|$)/) != null) {
               var arr = document.cookie.match(/scrollTop=([^;]+)(;|$)/); //cookies中不为空，则读取滚动条位置
-              console.log('arr',arr)
               document.documentElement.scrollTop = parseInt(arr[1]);
               document.body.scrollTop = parseInt(arr[1]);
             }
@@ -95,9 +66,6 @@
           doc.addEventListener("scroll", _this.onScroll);
 
         })
-      },
-      navigationToggle(d){
-        console.log(d)
       }
     }
   }