From e9d37a94d36bfea8571ca6147e2f41ee662064a1 Mon Sep 17 00:00:00 2001
From: Pan <panfree23@gmail.com>
Date: Thu, 8 Jun 2017 16:38:25 +0800
Subject: [PATCH] add markdown to html

---
 package.json                      |  1 +
 src/views/components/markdown.vue | 13 ++++++++++++-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index b0c425d7..7a278052 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "mockjs": "1.0.1-beta3",
     "normalize.css": "3.0.2",
     "nprogress": "0.2.0",
+    "showdown": "1.7.1",
     "simplemde": "1.11.2",
     "sortablejs": "1.5.1",
     "vue": "2.3.3",
diff --git a/src/views/components/markdown.vue b/src/views/components/markdown.vue
index 2a73dd58..6893729d 100644
--- a/src/views/components/markdown.vue
+++ b/src/views/components/markdown.vue
@@ -4,6 +4,8 @@
     <div class="editor-container">
       <MdEditor  id='contentEditor' ref="contentEditor" v-model='content' :height="300" :zIndex='20'></MdEditor>
     </div>
+    <el-button @click='markdown2Html' style="margin-top:80px;" type="primary">转为HTML<i class="el-icon-document el-icon--right"></i></el-button>
+    <div v-html="html"></div>
   </div>
 </template>
 <script>
@@ -13,7 +15,16 @@
       components: { MdEditor },
       data() {
         return {
-          content: 'Simplemde'
+          content: 'Simplemde',
+          html: ''
+        }
+      },
+      methods: {
+        markdown2Html() {
+          import('showdown').then(showdown => {
+            const converter = new showdown.Converter();
+            this.html = converter.makeHtml(this.content)
+          })
         }
       }
     };