From a0c5d89f59ccf9f2867f65219c23eeb94ada1e30 Mon Sep 17 00:00:00 2001
From: lin-xin <2981207131@qq.com>
Date: Wed, 11 Apr 2018 10:49:33 +0800
Subject: [PATCH] =?UTF-8?q?'=E4=BC=98=E5=8C=96=E7=BC=96=E8=BE=91=E5=99=A8?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                      |  1 +
 src/components/common/Sidebar.vue |  3 ++-
 src/components/page/BaseTable.vue |  2 +-
 src/components/page/Markdown.vue  | 23 +++++++----------------
 src/components/page/VueEditor.vue | 14 ++++++--------
 src/router/index.js               |  2 +-
 6 files changed, 18 insertions(+), 27 deletions(-)

diff --git a/package.json b/package.json
index 0f040c6..9350193 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "axios": "^0.15.3",
     "babel-polyfill": "^6.23.0",
     "element-ui": "2.3.3",
+    "mavon-editor": "^2.5.2",
     "vue": "^2.5.16",
     "vue-core-image-upload": "2.1.11",
     "vue-datasource": "1.0.12",
diff --git a/src/components/common/Sidebar.vue b/src/components/common/Sidebar.vue
index 7b1ad87..b48ae23 100644
--- a/src/components/common/Sidebar.vue
+++ b/src/components/common/Sidebar.vue
@@ -36,7 +36,7 @@
                         title: '自述文件'
                     },
                     {
-                        icon: 'el-icon-menu',
+                        icon: 'el-icon-tickets',
                         index: '2',
                         title: '常用表格',
                         subs: [
@@ -97,6 +97,7 @@
             }
         },
         created(){
+            // 通过 Event Bus 进行组件间通信，来折叠侧边栏
             bus.$on('collapse', msg => {
                 this.collapse = msg;
             })
diff --git a/src/components/page/BaseTable.vue b/src/components/page/BaseTable.vue
index 0e2c0bb..7501cbe 100644
--- a/src/components/page/BaseTable.vue
+++ b/src/components/page/BaseTable.vue
@@ -2,7 +2,7 @@
     <div class="table">
         <div class="crumbs">
             <el-breadcrumb separator="/">
-                <el-breadcrumb-item><i class="el-icon-menu"></i> 表格</el-breadcrumb-item>
+                <el-breadcrumb-item><i class="el-icon-tickets"></i> 表格</el-breadcrumb-item>
                 <el-breadcrumb-item>基础表格</el-breadcrumb-item>
             </el-breadcrumb>
         </div>
diff --git a/src/components/page/Markdown.vue b/src/components/page/Markdown.vue
index 9ed06b4..2dfd582 100644
--- a/src/components/page/Markdown.vue
+++ b/src/components/page/Markdown.vue
@@ -8,37 +8,28 @@
         </div>
         <div class="container">
             <div class="plugins-tips">
-                Vue-SimpleMDE：Vue.js的Markdown Editor组件。
-                访问地址：<a href="https://github.com/F-loat/vue-simplemde" target="_blank">Vue-SimpleMDE</a>
-            </div>
-            <markdown-editor v-model="content" :configs="configs" ref="markdownEditor"></markdown-editor>
-            <div class="plugins-tips">
-                <p>既然用了markdown语法了，那么就有一个很实际的问题了。要怎么在前台展示数据呢？</p>
-                <br>
-                <p>这个时候就需要解析markdown语法了。可以使用 <a href="https://github.com/miaolz123/vue-markdown" target="_blank">vue-markdown</a>：一个基于vue.js的markdown语法解析插件。（这里不作展开，有需要自行了解）</p>
+                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"/>
+
         </div>
     </div>
 </template>
 
 <script>
-    import { markdownEditor } from 'vue-simplemde';
+    import { mavonEditor } from 'mavon-editor'
+    import 'mavon-editor/dist/css/index.css'
     export default {
         data: function(){
             return {
                 content:'',
                 configs: {
-                    status: true,
-                    initialValue: 'Hello BBK',
-                    renderingConfig: {
-                        codeSyntaxHighlighting: true,
-                        highlightingTheme: 'atom-one-light'
-                    }
                 }
             }
         },
         components: {
-            markdownEditor
+            mavonEditor
         }
     }
 </script>
\ No newline at end of file
diff --git a/src/components/page/VueEditor.vue b/src/components/page/VueEditor.vue
index ebeb50a..ec3e5d8 100644
--- a/src/components/page/VueEditor.vue
+++ b/src/components/page/VueEditor.vue
@@ -11,20 +11,23 @@
                 Vue-Quill-Editor：基于Quill、适用于Vue2的富文本编辑器。
                 访问地址：<a href="https://github.com/surmon-china/vue-quill-editor" target="_blank">vue-quill-editor</a>
             </div>
-            <quill-editor ref="myTextEditor" v-model="content" :config="editorOption"></quill-editor>
+            <quill-editor ref="myTextEditor" v-model="content" :options="editorOption"></quill-editor>
             <el-button class="editor-btn" type="primary" @click="submit">提交</el-button>
         </div>
     </div>
 </template>
 
 <script>
+    import 'quill/dist/quill.core.css';
+    import 'quill/dist/quill.snow.css';
+    import 'quill/dist/quill.bubble.css';
     import { quillEditor } from 'vue-quill-editor';
     export default {
         data: function(){
             return {
-                content: '<p>Hello BBK</p>',
+                content: '',
                 editorOption: {
-                    // something config
+                    placeholder: 'Hello World'
                 }
             }
         },
@@ -39,11 +42,6 @@
                 console.log(this.content);
                 this.$message.success('提交成功！');
             }
-        },
-        computed: {
-            editor() {
-                return this.$refs.myTextEditor.quillEditor;
-            }
         }
     }
 </script>
diff --git a/src/router/index.js b/src/router/index.js
index a1bb3c2..28849f4 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -38,7 +38,7 @@ export default new Router({
                 {
                     // markdown组件
                     path: '/markdown',
-                    component: resolve => require(['../components/page/VueEditor.vue'], resolve)     
+                    component: resolve => require(['../components/page/Markdown.vue'], resolve)     
                 },
                 {
                     // Vue-Core-Image-Upload组件
-- 
GitLab