From 6531f7fac96c0d2c777ef2902c8ea8eb41bb1ab6 Mon Sep 17 00:00:00 2001
From: lin-xin <2981207131@qq.com>
Date: Wed, 11 Apr 2018 11:29:55 +0800
Subject: [PATCH] =?UTF-8?q?'md=E7=BC=96=E8=BE=91=E5=99=A8=E4=B8=8A?=
 =?UTF-8?q?=E4=BC=A0=E5=9B=BE=E7=89=87'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/Sidebar.vue |  4 ++--
 src/components/page/Markdown.vue  | 37 ++++++++++++++++++++++++++++---
 2 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/src/components/common/Sidebar.vue b/src/components/common/Sidebar.vue
index b48ae23..b947060 100644
--- a/src/components/common/Sidebar.vue
+++ b/src/components/common/Sidebar.vue
@@ -61,11 +61,11 @@
                             },
                             {
                                 index: 'vueeditor',
-                                title: '编辑器'
+                                title: '富文本编辑器'
                             },
                             {
                                 index: 'markdown',
-                                title: 'markdown'
+                                title: 'markdown编辑器'
                             },
                             {
                                 index: 'upload',
diff --git a/src/components/page/Markdown.vue b/src/components/page/Markdown.vue
index 2dfd582..a93cc6b 100644
--- a/src/components/page/Markdown.vue
+++ b/src/components/page/Markdown.vue
@@ -11,8 +11,8 @@
                 mavonEditor：基于Vue的markdown编辑器。
                 访问地址：<a href="https://github.com/hinesboy/mavonEditor" target="_blank">mavonEditor</a>
             </div>
-            <mavon-editor v-model="content" codeStyle="tomorrow-night-blue" style="min-height: 600px"/>
-
+            <mavon-editor v-model="content" ref="md" @imgAdd="$imgAdd" @change="change" style="min-height: 600px"/>
+            <el-button class="editor-btn" type="primary" @click="submit">提交</el-button>
         </div>
     </div>
 </template>
@@ -24,12 +24,43 @@
         data: function(){
             return {
                 content:'',
+                html:'',
                 configs: {
                 }
             }
         },
         components: {
             mavonEditor
+        },
+        methods: {
+            // 将图片上传到服务器，返回地址替换到md中
+            $imgAdd(pos, $file){
+                var formdata = new FormData();
+                formdata.append('file', $file);
+                // 这里没有服务器供大家尝试，可将下面上传接口替换为你自己的服务器接口
+                this.$axios({
+                    url: '/common/upload',
+                    method: 'post',
+                    data: formdata,
+                    headers: { 'Content-Type': 'multipart/form-data' },
+                }).then((url) => {
+                    this.$refs.md.$img2Url(pos, url);
+                })
+            },
+            change(value, render){
+                // render 为 markdown 解析后的结果
+                this.html = render;
+            },
+            submit(){
+                console.log(this.content);
+                console.log(this.html);
+                this.$message.success('提交成功！');
+            }
         }
     }
-</script>
\ No newline at end of file
+</script>
+<style scoped>
+    .editor-btn{
+        margin-top: 20px;
+    }
+</style>
\ No newline at end of file