'优化编辑器页面'

lin-xin · lin-xin · commit a0c5d89f59cc · 2018-04-11T10:49:33.000+08:00
diff --git 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
@@ -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
@@ -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
@@ -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>
diff --git 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
@@ -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组件

Original file line number	Diff line number	Diff line change
`@@ -38,7 +38,7 @@ export default new Router({`
`38`	`38`	`{`
`39`	`39`	`// markdown组件`
`40`	`40`	`path: '/markdown',`
`41`		`- component: resolve => require(['../components/page/VueEditor.vue'], resolve)`
	`41`	`+ component: resolve => require(['../components/page/Markdown.vue'], resolve)`
`42`	`42`	`},`
`43`	`43`	`{`
`44`	`44`	`// Vue-Core-Image-Upload组件`