Add vue-simplemde replace vue-markdown

package.json

@@ -13,9 +13,9 @@
     "element-ui": "^1.1.6",
     "vue": "^2.1.10",
     "vue-datasource": "^1.0.4",
-    "vue-markdown": "^2.1.3",
     "vue-quill-editor": "^1.1.1",
-    "vue-router": "^2.2.0"
+    "vue-router": "^2.2.0",
+    "vue-simplemde": "^0.3.2"
   },
   "devDependencies": {
     "autoprefixer": "^6.7.2",

src/components/page/Markdown.vue

@@ -7,39 +7,33 @@
             </el-breadcrumb>
         </div>
         <div class="plugins-tips">
-            vue-markdown：一个基于vue.js的markdown语法解析插件。
+            Vue-SimpleMDE：Vue.js的Markdown Editor组件。
-            访问地址：<a href="https://github.com/miaolz123/vue-markdown" target="_blank">vue-markdown</a>
+            访问地址：<a href="https://github.com/F-loat/vue-simplemde" target="_blank">Vue-SimpleMDE</a>
         </div>
-        <textarea class="markdown-left" v-model="content"></textarea>
+        <markdown-editor v-model="content" :configs="configs" ref="markdownEditor"></markdown-editor>
-        <vue-markdown class="markdown-right" :source="content"></vue-markdown>
     </div>
 </template>
 
 <script>
-    import VueMarkdown from 'vue-markdown';
+    import { markdownEditor } from 'vue-simplemde';
     export default {
         data: function(){
             return {
-                content:'# Hello BBK'
+                content:'',
+                configs: {
+                    status: false,
+                    initialValue: 'Hello BBK',
+                    renderingConfig: {
+                        codeSyntaxHighlighting: true,
+                        highlightingTheme: 'atom-one-light'
+                    }
+                }
             }
         },
         components: {
-            VueMarkdown
+            markdownEditor
         }
     }
 </script>
 
-<style scoped>
+<style></style>
-    .markdown-left,.markdown-right{
-        width:48%;
-        height: 700px;
-        float: left;
-        padding:10px;
-        box-sizing: border-box;
-        border: 1px solid #ddd;
-        overflow-y: scroll;
-    }
-    .markdown-right{
-        margin-left: 3%;
-    }
-</style>