Merge branch 'master' of github.com:hinesboy/mavonEditor

CHENXCHEN · CHENXCHEN · commit 59c361cbfc3d · 2018-01-04T10:24:15.000+08:00
diff --git a/README-EN.md b/README-EN.md
@@ -123,7 +123,8 @@ exports default {
 | code_style | String |    code-github     | markdown Style: default github, [option hljs color scheme](./src/lib/core/hljs/lang.hljs.css.js)  |
 | toolbarsFlag | Boolean     |   true       | Show toolbars |
 | toolbars   | Object      |   As in the following example  | toolbars |
-| ishljs       | Boolean |     true     | highlight code switch(cdn) |
+| ishljs       | Boolean |     true     | highlight code switch |
+| image_filter | Function |     null     | Image file filter Function, params is a `File Object`, you should return `Boolean` about the test result |
 
 ```javascript
  /*
diff --git a/README.md b/README.md
@@ -130,7 +130,8 @@ exports default {
 | code_style | String |    code-github     | markdown样式： 默认github, [可选配色方案](./src/lib/core/hljs/lang.hljs.css.js)   |
 | toolbarsFlag | Boolean |    true     | 工具栏是否显示                |
 | toolbars     | Object  |     如下例     | 工具栏                      |
-| ishljs       | Boolean |     true     |  代码高亮(cdn外链) |
+| ishljs       | Boolean |     true     |  代码高亮 |
+| image_filter | function |     null     |  图片过滤函数，参数为一个`File Object`，要求返回一个`Boolean`, `true`表示文件合法，`false`表示文件不合法 |
 
 ```javascript
  /*
diff --git a/dist/mavon-editor.js b/dist/mavon-editor.js
diff --git a/doc/cn/upload-images.md b/doc/cn/upload-images.md
@@ -118,7 +118,7 @@ exports default {
 ### 图片事件
 | name 方法名        |            params 参数            | describe 描述                              |
 | ----------------   | :-----------------------------: | ---------------------------------------- |
-| $vm.$refs.toolbar_left.$imgDelByFilename(>=**2.1.6**) |  String: filename | 主动删除对应图片文件, 如果成功返回TRUE，否则返回FALSE |
+| $vm.$refs.toolbar_left.$imgDelByFilename(>=**2.1.6**) |  String: filename | 主动删除对应图片文件, 如果成功返回TRUE，否则返回FALSE, (并将其从 `md` 源码中删除 (>=**2.4.16**)) |
 | $vm.$refs.toolbar_left.$imgAddByFilename(>=**2.1.6**) |  String: filename, File: file | 添加对应图片文件，文件别名为filename(filename 必须为 ./filename 样式), 如果成功返回TRUE，否则返回FALSE |
 | $vm.$refs.toolbar_left.$imgUpdateByFilename(>=**2.1.6**) |  String: filename, File: file | 更新对应文件名的图片文件(filename 必须为 ./filename 样式), 如果成功返回TRUE，否则返回FALSE |
 | $vm.$imgUpdateByUrl(>=**2.1.5**)    |  String: filename, String: url | 将<img>标签src相对路径值替换为url(如./0 -> http://path/to/png/some.png) |
@@ -129,5 +129,3 @@ exports default {
 **注意**: `$vm`指为`mavonEditor`实例，可以通过如下两种方式获取
 1. 通过引入对象获取: `import {mavonEditor} from ...` 等方式引入后，此时`$vm`即为`mavonEditor`
 2. 通过$refs获取: html声明ref : `<mavon-editor ref=md ></mavon-editor>， 此时`$vm`为 `this.$refs.md`
-
-
diff --git a/doc/en/upload-images.md b/doc/en/upload-images.md
@@ -115,7 +115,7 @@ exports default {
 ### image methods
 | name      |            params         | describe      |
 | ----------------   | :-----------------------------: | ---------------------------------------- |
-| $vm.$refs.toolbar_left.$imgDelByFilename(>=**2.1.6**) |  String: filename | Delete the image by filename, return true if sucess, false otherwise |
+| $vm.$refs.toolbar_left.$imgDelByFilename(>=**2.1.6**) |  String: filename | Delete the image by filename, return true if sucess, false otherwise, (and it will remove from `md` (>=**2.4.16**)) |
 | $vm.$refs.toolbar_left.$imgAddByFilename(>=**2.1.6**) |  String: filename, File: file | Add the image by filename (The filename alias style must be "./filename"), return true if sucess, false otherwise |
 | $vm.$refs.toolbar_left.$imgUpdateByFilename(>=**2.1.6**) |  String: filename, File: file | Update the image by filename(The filename alias style must be "./filename"), return true if sucess, false otherwise |
 | $vm.$imgUpdateByUrl(>=**2.1.6**)    |  String: filename, String: url | Update filename to url(example: ./0 -> http://path/to/png/some.png) |
@@ -126,5 +126,3 @@ exports default {
 **Notice**: `$vm` => reference instance of component, you can get it:
 1. `import {mavonEditor} from ...`: `$vm` == `mavonEditor`
 2. `<mavon-editor ref=md ></mavon-editor>: `$vm` == `this.$refs.md`
-
-
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mavon-editor",
-  "version": "2.4.15",
+  "version": "2.4.16",
   "description": "Vue markdown editor",
   "main": "dist/mavon-editor.js",
   "scripts": {
diff --git a/src/components/s-md-toolbar-left.vue b/src/components/s-md-toolbar-left.vue
@@ -57,7 +57,7 @@
             <div  class="op-image popup-dropdown" v-show="s_img_dropdown_open">
                 <div  class="dropdown-item" @click.stop="$toggle_imgLinkAdd('imagelink')" title="ctrl+alt+l"><span>{{d_words.tl_image}}</span></div>
                 <div class="dropdown-item" style="overflow: hidden">
-                    <input type="file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" @change="$imgAdd($event)" :key="img_file[0][0]"/>{{d_words.tl_upload}}
+                    <input type="file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" @change="$imgAdd($event)" :key="img_file[0][0]" multiple="multiple"/>{{d_words.tl_upload}}
                 </div>
 
                 <div class="dropdown-item dropdown-images" v-if="index > 0" v-for="(item, index) in img_file" @click.stop="$imgFileListClick(index)">
@@ -128,6 +128,10 @@
             d_words: {
                 type: Object,
                 required: true
+            },
+            image_filter: {
+                type: Function,
+                default: null,
             }
         },
         data() {
@@ -166,9 +170,19 @@
                 this.num = this.num + 1;
                 this.$emit('imgAdd', this.img_file[1][0], $file);
             },
+            $imgFilesAdd($files) {
+                // valid means if the image_filter exist.
+                let valid = (typeof this.image_filter == 'function');
+                for(let i = 0;i < $files.length;i++) {
+                    if(valid && this.image_filter($files[i]) === true) {
+                        this.$imgFileAdd($files[i]);
+                    } else if(!valid && $files[i].type.match(/^image\//i)) {
+                        this.$imgFileAdd($files[i]);
+                    }
+                }
+            },
             $imgAdd($e) {
-                // 新增加
-                this.$imgFileAdd($e.target.files[0]);
+                this.$imgFilesAdd($e.target.files);
             },
             $imgDel(pos) {
                 this.$emit('imgDel', this.img_file[pos]);
@@ -179,8 +193,7 @@
                 var pos = 0;
                 while (this.img_file.length > pos) {
                     if (this.img_file[pos][0] == filename) {
-                        this.$emit('imgDel', filename);
-                        this.img_file.splice(pos, 1);
+                        this.$imgDel(pos);
                         return true;
                     }
                     pos += 1;
diff --git a/src/dev/app.vue b/src/dev/app.vue
@@ -18,10 +18,13 @@
             </h2>
             <button @click="uploadimg">upload</button>
             <button @click="imgreplace">imgreplace</button>
+            <input type="text" v-model="imgName" />
+            <button @click="imgdelete">delete</button>
             <mavon-editor   ref=md :subfield="subfield" :toolbarsFlag="toolbarsFlag" :editable="editable"
                           :language="d_language" @change="change" @save="saveone" :ishljs="true" class="item-editor" v-model="help1"
                           :external_link="external_link"
-                          @imgAdd="$imgAdd" @imgDel="$imgDel" @subfieldtoggle="$subfieldtoggle" @previewtoggle="$previewtoggle"></mavon-editor>
+                          @imgAdd="$imgAdd" @imgDel="$imgDel" @subfieldtoggle="$subfieldtoggle" @previewtoggle="$previewtoggle"
+                          :image_filter="image_filter"></mavon-editor>
             
             <button ref="diy" type="button" @click="$click('selftest')" class="op-icon fa fa-mavon-align-left"
                 aria-hidden="true" title="自定义"></button>
@@ -119,7 +122,13 @@
                     preview: true, // 预览
                     /* 1.4.2 */
                     navigation: true, // 导航目录
-                }
+                },
+                image_filter: function($files) {
+                    console.log('image_filter files:', $files);
+                    // console.log('here for you', $files);
+                    return true;
+                },
+                imgName: '',
             }
         },
         created () {
@@ -218,6 +227,11 @@
             },
             $previewtoggle(flag , value) {
                 console.log('preview toggle' + flag)
+            },
+            imgdelete() {
+                var md = this.$refs.md;
+                var toolbar_left = md.$refs.toolbar_left;
+                toolbar_left.$imgDelByFilename(this.imgName);
             }
         },
         watch: {
diff --git a/src/mavon-editor.vue b/src/mavon-editor.vue
@@ -4,7 +4,7 @@
         <div class="v-note-op" v-show="toolbarsFlag">
             <s-md-toolbar-left ref="toolbar_left" :editable="editable" :d_words="d_words"
                                @toolbar_left_click="toolbar_left_click" @toolbar_left_addlink="toolbar_left_addlink" :toolbars="toolbars"
-                               @imgAdd="$imgAdd" @imgDel="$imgDel" @imgTouch="$imgTouch"/>
+                               @imgAdd="$imgAdd" @imgDel="$imgDel" @imgTouch="$imgTouch" :image_filter="image_filter"/>
             <s-md-toolbar-right ref="toolbar_right" :d_words="d_words" @toolbar_right_click="toolbar_right_click"
                                 :toolbars="toolbars"
                                 :s_subfield="s_subfield"
@@ -168,6 +168,10 @@
                 type: [Object, Boolean],
                 default: true
             },
+            image_filter: {
+                type: Function,
+                default: null,
+            }
         },
         data() {
             return {
@@ -317,11 +321,7 @@
                     var files = dataTransfer.files;
                     if (files.length > 0) {
                         $e.preventDefault();
-                        for (var i = 0; i < files.length; i++) {
-                            if(files[i].type.match(/^image\//i)) {
-                                this.$refs.toolbar_left.$imgFileAdd(files[i]);
-                            }
-                        }
+                        this.$refs.toolbar_left.$imgFilesAdd(files);
                     }
                 }
             },
@@ -338,9 +338,9 @@
                             break;
                         }
                     }
-                    if (item && item.kind === 'file' && item.type.match(/^image\//i)) {
+                    if (item && item.kind === 'file') {
                         var oFile = item.getAsFile();
-                        this.$refs.toolbar_left.$imgFileAdd(oFile);
+                        this.$refs.toolbar_left.$imgFilesAdd([oFile,]);
                     }
                 }
             },

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "mavon-editor",`
`3`		`- "version": "2.4.15",`
	`3`	`+ "version": "2.4.16",`
`4`	`4`	`"description": "Vue markdown editor",`
`5`	`5`	`"main": "dist/mavon-editor.js",`
`6`	`6`	`"scripts": {`