From fe2fb8aba19c6473e79c6dc3173a350ee1497edb Mon Sep 17 00:00:00 2001
From: zhaoxuhui <zhaoxuhui@tan66.com>
Date: Fri, 24 Aug 2018 09:52:19 +0800
Subject: [PATCH] =?UTF-8?q?chore:=E5=A2=9E=E5=8A=A0=E5=88=9D=E5=A7=8B?=
 =?UTF-8?q?=E5=8C=96=E6=A8=A1=E5=BC=8F=E9=80=89=E6=8B=A9=EF=BC=8C=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=E4=BA=8B=E4=BB=B6=E7=9B=91=E5=90=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                |  1 +
 src/markdown/index.vue   | 44 +++++++++++++-----------
 src/markdown/markdown.js | 72 +++++++++++++++++++++++++++++-----------
 3 files changed, 79 insertions(+), 38 deletions(-)

diff --git a/README.md b/README.md
index 53525a1..0f67b3f 100644
--- a/README.md
+++ b/README.md
@@ -54,6 +54,7 @@ theme|String|代码块主题配置，共有四个值，分别为Light、Dark、O
 autoSave|Boolean|是否自动保存|true
 interval|Number|自动保存频率，单位毫秒|10000
 toolbars|Object|工具栏配置，具体功能详见工具栏功能配置表
+mode|Number|初始化显示模式 1 分屏显示 2 预览详情 3 全屏编辑
 
 ### 5.events
 
diff --git a/src/markdown/index.vue b/src/markdown/index.vue
index 890cd71..879b5df 100644
--- a/src/markdown/index.vue
+++ b/src/markdown/index.vue
@@ -1,5 +1,11 @@
 <template lang="html">
-  <div :class="isFullscreen?'markdown fullscreen':'markdown' " ref="markdown" :style="{height:`${editorHeight}px`}">
+  <div
+    :class="isFullscreen?'markdown fullscreen':'markdown' "
+    ref="markdown"
+    :style="{height:`${editorHeight}px`}"
+    @mouseover="addListener"
+    @mouseout="removeListener"
+  >
     <!-- 头部工具栏 -->
     <ul class="markdown-toolbars">
       <li class="title" v-if="title" :style="{titleStyle}">{{title}}</li>
@@ -15,52 +21,52 @@
       <li v-if="tools.h1" name="标题1">
         <span @click="insertTitle(1)">h1</span>
       </li>
-      <li v-if="tools.h2"name="标题2">
+      <li v-if="tools.h2" name="标题2">
         <span @click="insertTitle(2)">h2</span>
       </li>
-      <li v-if="tools.h3"name="标题3">
+      <li v-if="tools.h3" name="标题3">
         <span @click="insertTitle(3)">h3</span>
       </li>
-      <li v-if="tools.h4"name="标题4">
+      <li v-if="tools.h4" name="标题4">
         <span @click="insertTitle(4)">h4</span>
       </li>
-      <li v-if="tools.h5"name="标题5">
+      <li v-if="tools.h5" name="标题5">
         <span @click="insertTitle(5)">h5</span>
       </li>
-      <li v-if="tools.h6"name="标题6">
+      <li v-if="tools.h6" name="标题6">
         <span @click="insertTitle(6)">h6</span>
       </li>
       <li v-if="tools.hr" name="分割线">
         <span @click="insertLine" class="iconfont icon-horizontal"></span>
       </li>
       <li v-if="tools.quote" name="引用">
-        <span @click="insertContent('\n>  ')" class="iconfont icon-quote"></span>
+        <span @click="insertQuote" class="iconfont icon-quote"></span>
       </li>
       <li v-if="tools.ul" name="无序列表">
-        <span @click="insertContent('-  ')" class="iconfont icon-ul"></span>
+        <span @click="insertUl" class="iconfont icon-ul"></span>
       </li>
       <li v-if="tools.ol" name="有序列表">
-        <span @click="insertContent('1. ')" class="iconfont icon-ol"></span>
+        <span @click="insertOl" class="iconfont icon-ol"></span>
       </li>
       <li v-if="tools.code" name="代码块">
         <span @click="insertCode" class="iconfont icon-code"></span>
       </li>
       <li v-if="tools.notChecked" name="未完成列表">
-        <span @click="insertContent('- [ ]  ')" class="iconfont icon-checked-false"></span>
+        <span @click="insertNotFinished" class="iconfont icon-checked-false"></span>
       </li>
       <li v-if="tools.checked" name="已完成列表">
-        <span @click="insertContent('- [x]  ')" class="iconfont icon-checked"></span>
+        <span @click="insertFinished" class="iconfont icon-checked"></span>
       </li>
       <li v-if="tools.link" name="链接">
-        <span @click="insertContent('\n[插入链接](https://github.com/coinsuper)')" class="iconfont icon-link"></span>
+        <span @click="insertLink" class="iconfont icon-link"></span>
       </li>
       <li v-if="tools.image" name="图片">
-        <span @click="insertContent('\n![image](https://noticejs.oss-cn-hangzhou.aliyuncs.com/%E6%9C%AA%E6%A0%87%E9%A2%98-3.jpg)')" class="iconfont icon-img"></span>
+        <span @click="insertImage" class="iconfont icon-img"></span>
       </li>
       <li v-if="tools.table" name="表格">
         <span
-        @click="insertContent(`\nheader 1 | header 2\n---|---\nrow 1 col 1 | row 1 col 2\nrow 2 col 1 | row 2 col 2\n\n`)"
-        class="iconfont icon-table"></span>
+          @click="insertTable"
+          class="iconfont icon-table"></span>
       </li>
       <li v-if="tools.print" name="打印">
         <span class="iconfont icon-dayin" @click="print"></span>
@@ -76,13 +82,13 @@
           </ul>
         </div>
       </li>
-      <li v-if="tools.shift&&preview===1" name="预览">
+      <li v-if="tools.shift&&preview==1" name="预览">
         <span @click="preview=2" class="iconfont icon-preview"></span>
       </li>
-      <li v-if="tools.shift&&preview===2" name="编辑">
+      <li v-if="tools.shift&&preview==2" name="编辑">
         <span @click="preview=3" class="iconfont icon-md"></span>
       </li>
-      <li v-if="tools.shift&&preview===3" name="分屏显示">
+      <li v-if="tools.shift&&preview==3" name="分屏显示">
         <span @click="preview=1" class="iconfont icon-group"></span>
       </li>
       <li class="empty"></li>
@@ -91,7 +97,7 @@
         <span @click="isFullscreen=!isFullscreen" class="iconfont icon-full-screen"></span>
       </li>
       <li v-if="tools.fullscreen&&isFullscreen" name="退出全屏">
-        <span  @click="isFullscreen=!isFullscreen" class="iconfont icon-exit-full-screen"></span>
+        <span @click="isFullscreen=!isFullscreen" class="iconfont icon-exit-full-screen"></span>
       </li>
     </ul>
     <!-- 编辑器 -->
diff --git a/src/markdown/markdown.js b/src/markdown/markdown.js
index df2d4a2..ee40f86 100644
--- a/src/markdown/markdown.js
+++ b/src/markdown/markdown.js
@@ -25,7 +25,7 @@ export default {
       type : String,
       default : ''
     },
-    titleStyle : {
+    titleStyle : {// 标题样式
       type : Object,
       default() {
         return {}
@@ -60,6 +60,10 @@ export default {
     initialValue : { // 初始化值
       type : String,
       default : ''
+    },
+    mode : { // 模式 1 分屏显示 2 预览详情 3 全屏编辑
+      type : [Number, String],
+      default : 1
     }
   },
   data() {
@@ -123,13 +127,14 @@ export default {
       this.$refs.textarea.focus();
     })
     this.init();
-    this.addListener();
+    //this.addListener();
   },
   methods : {
     init() {
       this.themeName = this.theme;
-      const {autoSave, interval, theme, initialValue} = this;
+      const {autoSave, interval, theme, initialValue, mode} = this;
       this.value = initialValue;
+      this.preview = mode;
       this.previewMarkdown = marked(initialValue, {
         sanitize : true
       });
@@ -229,14 +234,6 @@ export default {
         range.select();
       }
     },
-    tab(e) { // 屏蔽teatarea tab默认事件
-      this.insertContent('    ', this);
-      if (e.preventDefault) {
-        e.preventDefault();
-      } else {
-        e.returnValue = false;
-      }
-    },
     insertLine() { // 插入分割线
       this.insertContent(`\n----\n`);
     },
@@ -251,6 +248,30 @@ export default {
       };
       this.insertContent(titleLevel[level]);
     },
+    insertQuote() { // 引用
+      this.insertContent('\n>  ');
+    },
+    insertUl() { // 无需列表
+      this.insertContent('-  ');
+    },
+    insertOl() { // 有序列表
+      this.insertContent('1. ');
+    },
+    insertFinished() { // 已完成列表
+      this.insertContent('- [x]  ');
+    },
+    insertNotFinished() { // 未完成列表
+      this.insertContent('- [ ]  ');
+    },
+    insertLink() { // 插入链接
+      this.insertContent('\n[插入链接](https://github.com/coinsuper)');
+    },
+    insertImage() { // 插入图片
+      this.insertContent('\n![image](https://noticejs.oss-cn-hangzhou.aliyuncs.com/%E6%9C%AA%E6%A0%87%E9%A2%98-3.jpg)');
+    },
+    insertTable() { // 插入表格
+      this.insertContent(`\nheader 1 | header 2\n---|---\nrow 1 col 1 | row 1 col 2\nrow 2 col 1 | row 2 col 2\n\n`);
+    },
     insertCode() { // 插入code
       const textareaDom = this.$refs.textarea;
       const point = this.getCursortPosition();
@@ -328,11 +349,19 @@ export default {
       };
       this.insertContent(titleLevel[level]);
     },
-    save(e) { // 保存
+    save(e) { // ctrl+s 保存
       e.preventDefault();
       this.handleSave();
     },
-    handleSave() {
+    tab(e) { // 屏蔽teatarea tab默认事件
+      this.insertContent('    ', this);
+      if (e.preventDefault) {
+        e.preventDefault();
+      } else {
+        e.returnValue = false;
+      }
+    },
+    handleSave() { // 保存操作
       this.$emit('on-save', {
         markdownValue : this.value,
         htmlValue : this.previewMarkdown,
@@ -367,12 +396,17 @@ export default {
       Print(dom);
     },
     addListener() { // 事件监听，阻止保存
-      document.addEventListener('keydown', e => {
-        if (e.keyCode === 83 && e.metaKey) {
-          e.preventDefault();
-          this.handleSave();
-        }
-      })
+      this.removeListener();
+      document.addEventListener('keydown',this.listener)
+    },
+    removeListener(){
+      document.removeEventListener('keydown',this.listener)
+    },
+    listener(e){
+      if (e.keyCode === 83 && e.metaKey) {
+        e.preventDefault();
+        this.handleSave();
+      }
     }
   },
   watch : {