'md编辑器上传图片'

src/components/common/Sidebar.vue

@@ -61,11 +61,11 @@
                             },
                             {
                                 index: 'vueeditor',
-                                title: '编辑器'
+                                title: '富文本编辑器'
                             },
                             {
                                 index: 'markdown',
-                                title: 'markdown'
+                                title: 'markdown编辑器'
                             },
                             {
                                 index: 'upload',

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>
+<style scoped>
+    .editor-btn{
+        margin-top: 20px;
+    }
+</style>