chore:增加初始化模式选择，修改事件监听

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
 

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,51 +21,51 @@
       <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`)"
+          @click="insertTable"
           class="iconfont icon-table"></span>
       </li>
       <li v-if="tools.print" name="打印">
@@ -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>

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 => {
+      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 : {