chore：选择本地文件时增加类型限制

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-meditor",
   "description": "一款使用marked和highlight.js开发的一款markdown编辑器",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "author": "zhaoxuhui<1258835133@qq.com>",
   "license": "MIT",
   "main": "dist/index.js",

src/markdown/index.vue

@@ -76,7 +76,7 @@
       </li>
       <li name="导入本地文件" class="import-file" v-show="tools.importmd">
         <span class="iconfont icon-daoru"></span>
-        <input type="file" @change="importFile($event)">
+        <input type="file" @change="importFile($event)" accept="text/markdown">
       </li>
       <li name="保存到本地" v-show="tools.exportmd">
         <span class="iconfont icon-download" @click="exportMd"></span>

src/markdown/markdown.js

@@ -6,112 +6,112 @@ import Print from './js/print';
 hljs.initHighlightingOnLoad();
 
 marked.setOptions({
-  renderer : new marked.Renderer(),
+  renderer: new marked.Renderer(),
-  gfm : true,
+  gfm: true,
-  tables : true,
+  tables: true,
-  breaks : false,
+  breaks: false,
-  pedantic : false,
+  pedantic: false,
-  sanitize : true,
+  sanitize: true,
-  smartLists : true,
+  smartLists: true,
-  highlight : function (code) {
+  highlight: function (code) {
     return hljs.highlightAuto(code).value;
   }
 });
 
 export default {
-  name : 'markdown',
+  name: 'markdown',
-  props : {
+  props: {
-    title : { // 标题
+    title: { // 标题
-      type : String,
+      type: String,
-      default : ''
+      default: ''
     },
-    titleStyle : {// 标题样式
+    titleStyle: { // 标题样式
-      type : Object,
+      type: Object,
-      default() {
+      default () {
         return {}
       }
     },
-    theme : { // 默认主题
+    theme: { // 默认主题
-      type : String,
+      type: String,
-      default : 'Light'
+      default: 'Light'
     },
-    width : {// 宽度
+    width: { // 宽度
-      type : [Number, String],
+      type: [Number, String],
-      default : 'auto'
+      default: 'auto'
     },
-    height : { // 高度
+    height: { // 高度
-      type : Number,
+      type: Number,
-      default : 600
+      default: 600
     }, // 宽度
-    toolbars : { // 工具栏
+    toolbars: { // 工具栏
-      type : Object,
+      type: Object,
-      default() {
+      default () {
         return {};
       }
     },
-    autoSave : {// 是否自动保存
+    autoSave: { // 是否自动保存
-      type : Boolean,
+      type: Boolean,
-      default : true
+      default: true
     },
-    interval : { // 自动保存频率 单位：毫秒
+    interval: { // 自动保存频率 单位：毫秒
-      type : Number,
+      type: Number,
-      default : 10000
+      default: 10000
     },
-    initialValue : { // 初始化值
+    initialValue: { // 初始化值
-      type : String,
+      type: String,
-      default : ''
+      default: ''
     },
-    mode : { // 模式 1 分屏显示 2 预览详情 3 全屏编辑
+    mode: { // 模式 1 分屏显示 2 预览详情 3 全屏编辑
-      type : [Number, String],
+      type: [Number, String],
-      default : 1
+      default: 1
     }
   },
   data() {
     return {
-      value : '', // 输入框内容
+      value: '', // 输入框内容
-      timeoutId : null,
+      timeoutId: null,
-      hljsInit : null,
+      hljsInit: null,
-      indexLenth : 1,
+      indexLenth: 1,
-      previewMarkdown : '',
+      previewMarkdown: '',
-      preview : 1, // 是否是预览状态
+      preview: 1, // 是否是预览状态
-      isFullscreen : false,
+      isFullscreen: false,
-      scrollHeight : null,
+      scrollHeight: null,
-      scroll : 'markdown',// 哪个半栏在滑动
+      scroll: 'markdown', // 哪个半栏在滑动
-      allTools : { // 显示隐藏的工具栏
+      allTools: { // 显示隐藏的工具栏
-        strong : true,
+        strong: true,
-        italic : true,
+        italic: true,
-        overline : true,
+        overline: true,
-        h1 : true,
+        h1: true,
-        h2 : true,
+        h2: true,
-        h3 : true,
+        h3: true,
-        h4 : false,
+        h4: false,
-        h5 : false,
+        h5: false,
-        h6 : false,
+        h6: false,
-        hr : true,
+        hr: true,
-        quote : true,
+        quote: true,
-        ul : true,
+        ul: true,
-        ol : true,
+        ol: true,
-        code : true,
+        code: true,
-        link : true,
+        link: true,
-        image : true,
+        image: true,
-        table : true,
+        table: true,
-        checked : true,
+        checked: true,
-        notChecked : true,
+        notChecked: true,
-        shift : true,
+        shift: true,
-        fullscreen : true,
+        fullscreen: true,
-        print : false,
+        print: false,
         theme: true,
-        exportmd:true,
+        exportmd: true,
-        importmd:true
+        importmd: true
       },
-      slideDown : false,
+      slideDown: false,
-      themeName : 'Light',// 主题名称
+      themeName: 'Light', // 主题名称
-      lastInsert : '',
+      lastInsert: '',
-      timerId : null,// 定时器id
+      timerId: null, // 定时器id
 
     };
   },
-  computed : {
+  computed: {
     editorHeight() {
       if (this.isFullscreen) {
         return window.innerHeight;
@@ -120,7 +120,10 @@ export default {
       }
     },
     tools() {
-      const {allTools, toolbars} = this;
+      const {
+        allTools,
+        toolbars
+      } = this;
       return Object.assign(allTools, toolbars)
     }
   },
@@ -132,14 +135,20 @@ export default {
     this.init();
     //this.addListener();
   },
-  methods : {
+  methods: {
     init() {
       this.themeName = this.theme;
-      const {autoSave, interval, theme, initialValue, mode} = this;
+      const {
+        autoSave,
+        interval,
+        theme,
+        initialValue,
+        mode
+      } = this;
       this.value = initialValue;
       this.preview = mode;
       this.previewMarkdown = marked(initialValue, {
-        sanitize : true
+        sanitize: true
       });
       if (autoSave) {
         this.timerId = setInterval(() => {
@@ -168,11 +177,13 @@ export default {
         markdownContent.scrollTop = parseInt((previewScrollTop / previewScrollHeight) * markdownScrollHeight);
       }
     },
-    mousescrollSide(side) {// 设置究竟是哪个半边在主动滑动
+    mousescrollSide(side) { // 设置究竟是哪个半边在主动滑动
       this.scroll = side;
     },
     insertContent(str) { // 插入文本
-      const {preview} = this;
+      const {
+        preview
+      } = this;
       if (preview === 2) {
         return;
       }
@@ -194,7 +205,7 @@ export default {
       if (document.selection) {
         textDom.focus();
         let selectRange = document.selection.createRange();
-        selectRange.moveStart('character', - this.value.length);
+        selectRange.moveStart('character', -this.value.length);
         cursorPos = selectRange.text.length;
       } else if (textDom.selectionStart || textDom.selectionStart == '0') {
         cursorPos = textDom.selectionStart;
@@ -242,12 +253,12 @@ export default {
     },
     insertTitle(level) { // 插入标题
       const titleLevel = {
-        1 : '\n#  ',
+        1: '\n#  ',
-        2 : '\n##  ',
+        2: '\n##  ',
-        3 : '\n###  ',
+        3: '\n###  ',
-        4 : '\n####  ',
+        4: '\n####  ',
-        5 : '\n#####  ',
+        5: '\n#####  ',
-        6 : '\n######  '
+        6: '\n######  '
       };
       this.insertContent(titleLevel[level]);
     },
@@ -343,12 +354,12 @@ export default {
     },
     insertTitle(level) { // 插入标题
       const titleLevel = {
-        1 : '#  ',
+        1: '#  ',
-        2 : '##  ',
+        2: '##  ',
-        3 : '###  ',
+        3: '###  ',
-        4 : '####  ',
+        4: '####  ',
-        5 : '#####  ',
+        5: '#####  ',
-        6 : '######  '
+        6: '######  '
       };
       this.insertContent(titleLevel[level]);
     },
@@ -366,23 +377,25 @@ export default {
     },
     handleSave() { // 保存操作
       this.$emit('on-save', {
-        markdownValue : this.value,
+        markdownValue: this.value,
-        htmlValue : this.previewMarkdown,
+        htmlValue: this.previewMarkdown,
-        theme : this.theme
+        theme: this.theme
       });
     },
     insertLine() { // 插入分割线
       this.insertContent(`\n----\n`);
     },
     toggleSlideDown() { // 显示主题选项
-      this.slideDown = ! this.slideDown;
+      this.slideDown = !this.slideDown;
     },
     setThemes(name) { // 设置主题
       this.themeName = name;
       this.slideDown = false;
     },
     enter(e) { // 回车事件
-      const {lastInsert} = this;
+      const {
+        lastInsert
+      } = this;
       const list = ['-  ', '1. ', '- [ ]  ', '- [x]  ']
       if (list.includes(lastInsert)) {
         this.insertContent(lastInsert);
@@ -400,14 +413,14 @@ export default {
     },
     addListener() { // 事件监听，阻止保存
       this.removeListener();
-      document.addEventListener('keydown',this.listener)
+      document.addEventListener('keydown', this.listener)
     },
-    removeListener(){
+    removeListener() {
-      document.removeEventListener('keydown',this.listener)
+      document.removeEventListener('keydown', this.listener)
     },
-    listener(e){
+    listener(e) {
       if (e.keyCode === 83) {
-        if( e.metaKey||e.ctrlKey){
+        if (e.metaKey || e.ctrlKey) {
           e.preventDefault();
           this.handleSave();
         }
@@ -415,23 +428,29 @@ export default {
     },
     importFile(e) { // 导入文件
       const file = e.target.files[0];
-      if (! file) {
+      if (!file) {
         return;
       }
-      const {type} = file;
+      const {
+        type
+      } = file;
       if (type !== 'text/markdown') {
-          this.$Notice.error('文件格式有误!');
+        alert('文件格式有误');
         return;
       }
       const reader = new FileReader();
-      reader.readAsText(file, {encoding : 'utf-8'});
+      reader.readAsText(file, {
+        encoding: 'utf-8'
+      });
       reader.onload = () => {
         this.value = reader.result;
         e.target.value = '';
       }
     },
     exportMd() { // 导出文件到本地
-      const { value } = this;
+      const {
+        value
+      } = this;
       var pom = document.createElement('a');
       pom.setAttribute('href', 'data:text/plain;charset=UTF-8,' + encodeURIComponent(value));
       pom.setAttribute('download', '未命名.md');
@@ -445,12 +464,12 @@ export default {
       }
     }
   },
-  watch : {
+  watch: {
     value() {
       clearTimeout(this.timeoutId);
       this.timeoutId = setTimeout(() => {
         this.previewMarkdown = marked(this.value, {
-          sanitize : true
+          sanitize: true
         });
       }, 30)
       this.indexLenth = this.value.split('\n').length;