add markdown to html

Author: PanJiaChen

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",

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)
+          })
         }
       }
     };