Add image_filter, delete the url in md context after $imgDelByFilename, hinesboy#101

Author: CHENXCHEN

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;

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

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,]);
                     }
                 }
             },