From daae705df5ebbc6f6bbb8136401c9390d9e66675 Mon Sep 17 00:00:00 2001
From: jmal <zhushilun084@gmail.com>
Date: Sat, 7 Mar 2020 14:10:00 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BC=96=E8=BE=91markdown=E6=96=87=E6=A1=A3?=
 =?UTF-8?q?=E6=98=AF=E4=B8=8A=E4=BC=A0=E5=9B=BE=E7=89=87=E5=B9=B6=E5=9B=9E?=
 =?UTF-8?q?=E6=98=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/upload-api.js        | 10 ++++++++-
 src/utils/request.js         |  1 -
 src/views/markdown/index.vue | 30 ++++++++++++++++++++++++++-
 src/views/public/p/index.vue | 40 ++++--------------------------------
 4 files changed, 42 insertions(+), 39 deletions(-)

diff --git a/src/api/upload-api.js b/src/api/upload-api.js
index 1e1170b..0e1989c 100644
--- a/src/api/upload-api.js
+++ b/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
+    })
+  },
 }
diff --git a/src/utils/request.js b/src/utils/request.js
index 8bdecc6..6e71dfc 100644
--- a/src/utils/request.js
+++ b/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
diff --git a/src/views/markdown/index.vue b/src/views/markdown/index.vue
index 4fc31be..bccb99e 100644
--- a/src/views/markdown/index.vue
+++ b/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"
diff --git a/src/views/public/p/index.vue b/src/views/public/p/index.vue
index be7123a..78457a9 100644
--- a/src/views/public/p/index.vue
+++ b/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)
       }
     }
   }