基本完成编辑器功能

ovenslove · Mar 25, 2017 · 92b0831 · 92b0831
1 parent fb3ed97
commit 92b0831
Show file tree

Hide file tree

Showing 16 changed files with 1,579 additions and 21 deletions.
diff --git a/index.html b/index.html
@@ -1,11 +1,15 @@
 <!DOCTYPE html>
 <html>
-  <head>
+
+<head>
     <meta charset="utf-8">
     <title>vue-mdeditor</title>
-  </head>
-  <body>
+    <link href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
+</head>
+
+<body>
     <div id="app"></div>
     <!-- built files will be auto injected -->
-  </body>
-</html>
+</body>
+
+</html>
diff --git a/package.json b/package.json
@@ -33,6 +33,7 @@
     "html-webpack-plugin": "^2.28.0",
     "http-proxy-middleware": "^0.17.3",
     "jade": "^1.11.0",
+    "marked": "^0.3.6",
     "node-sass": "^4.5.1",
     "opn": "^4.0.2",
     "optimize-css-assets-webpack-plugin": "^1.3.0",

diff --git a/src/App.vue b/src/App.vue
@@ -11,14 +11,17 @@
 </script>
 
 <style lang="scss">
+  * {
+    padding: 0;
+    border: 0;
+    margin: 0;
+  }
+  body,html{
+    height: 100%;
+    width: 100%;
+  }
   #app {
-    font-family: 'Avenir', Helvetica, Arial, sans-serif;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    text-align: center;
-    color: #2c3e50;
-    margin-top: 60px;
-    img {
-    }
+    height: 100%;
+    width: 100%;
   }
 </style>
diff --git a/src/components/index.vue b/src/components/index.vue
@@ -0,0 +1,53 @@
+<template>
+    <div class="indexContainer">
+
+        <!--<div class="show"> {{msg}}</div>-->
+
+        <div class="editorContainer">
+            <markdown v-bind:mdValues.sync="msg" @childevent="childEventHandler"></markdown>
+        </div>
+    </div>
+</template>
+
+<script>
+    import markdown from '../components/markdown'
+    export default {
+        name: 'index',
+        data() {
+            return {
+                msg: '## Vue-markdownEditor'
+            }
+        },
+        components: {
+            markdown
+        },
+        methods: {
+            childEventHandler:function(res){
+                this.msg=res;
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    .show{
+        position: absolute;
+        left: 0;
+        top: 0;
+    }
+    .indexContainer {
+        width: 100%;
+        height: 100%;
+        background: #ddd;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        position: relative;
+    }
+    
+    .editorContainer {
+        width: 90%;
+        height: 90%;
+        border: 1px solid #ddd;
+    }
+</style>
diff --git a/src/components/markdown.vue b/src/components/markdown.vue
@@ -1,21 +1,122 @@
 <template>
-<div class="mdContainer">
-    {{msg}}
-</div>
-
+    <div class="mdContainer">
+        <div class="navContainer">
+            <div class="nameContainer">OVEN-mdEditor</div>
+        </div>
+        <div class="mdBodyContainer">
+            <div class="editContainer">
+                <textarea name="" class="mdEditor" v-model="input" v-on:input="updateFn"></textarea>
+            </div>
+            <div class="previewContainer markdown-body" v-html="compiledMarkdown">
+            </div>
+        </div>
+    </div>
 </template>
 
 <script>
+    var marked = require('marked');
+    import hljs from '../../static/js/highlight.min.js'
+    marked.setOptions({
+        renderer: new marked.Renderer(),
+        gfm: true,
+        tables: true,
+        breaks: false,
+        pedantic: false,
+        sanitize: true,
+        smartLists: true,
+        smartypants: false,
+        highlight: function(code) {
+            return hljs.highlightAuto(code).value
+        }
+    })
     export default {
         name: 'markdown',
+        props: ['mdValues'],
         data() {
             return {
-                msg: 'sssdkgshdkg'
+                input: this.mdValues
+            }
+        },
+        methods: {
+            updateFn: function() {
+                this.$emit('childevent', this.input);
+            }
+        },
+        computed: {
+            compiledMarkdown: function() {
+                return marked(this.input, {
+                    sanitize: true
+                })
             }
         }
     }
 </script>
 
 <style lang="scss">
+    //引入reset文件
+    @import "../../static/css/reset";
+    // 引入github的markdown样式文件
+    @import "../../static/css/github-markdown.css";
+    // 引入atom的代码高亮样式文件
+    @import "../../static/css/atom-one-dark.min.css";
+    
+    /**/
+    
+    .mdContainer {
+        width: 100%;
+        height: 100%;
+        background: lightblue;
+        .navContainer {
+            width: 100%;
+            height: 36px;
+            background: #fff;
+            box-sizing: border-box;
+            border-bottom: 1px solid #eee;
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+            padding: 0 10px;
+            .nameContainer {
+                color: lightblue;
+            }
+        }
+        .mdBodyContainer {
+            width: 100%;
+            height: calc(100% - 36px);
+            background: pink;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            box-sizing: border-box;
+        }
+    }
     
+    // 编辑区域
+    .editContainer {
+        height: 100%;
+        width: 50%;
+        box-sizing: border-box;
+        border-right: 1px solid #ddd;
+        background: #333;
+        color: #fff;
+        padding: 10px;
+        .mdEditor {
+            height: 100%;
+            width: 100%;
+            background: transparent;
+            outline: none;
+            color: #fff;
+            resize: none;
+        }
+    }
+    
+    // 预览区
+    .previewContainer {
+        width: 50%;
+        height: 100%;
+        box-sizing: border-box;
+        background: #fff;
+        overflow: auto;
+        padding: 10px;
+    }
 </style>
diff --git a/src/router/index.js b/src/router/index.js
@@ -1,13 +1,13 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-import Markdown from '@/components/markdown'
+import Index from '@/components/index'
 
 Vue.use(Router)
 
 export default new Router({
     routes: [{
         path: '/',
-        name: 'markdown',
-        component: Markdown
+        name: 'index',
+        component: Index
     }]
 })
diff --git a/static/css/arta.min.css b/static/css/arta.min.css
diff --git a/static/css/atom-one-dark.min.css b/static/css/atom-one-dark.min.css