富文本限制图片体积大小功能完成

fhKeeper/formulahousekeeper/timesheet/src/views/project/projectInside.vue

@@ -257,7 +257,7 @@
                     <!-- <Editor id="tinymce" v-model="tinymceHtml" :init="editorInit"></Editor> -->
                     <!-- <el-input type="textarea" v-model="addForm.taskDesc" :rows="3"></el-input> -->
                       <!-- <quill-edito v-model="addForm.taskDesc"></quill-edito> -->
-                      <quill-editor ref="text" v-model="addForm.taskDesc" class="myQuillEditor" :options="editorOption" />
+                      <quill-editor ref="text" v-model="addForm.taskDesc" class="myQuillEditor" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"/>
                 </el-form-item>
                 <!-- 富文本 -->
                 <div v-if="addForm.id != null">
@@ -463,7 +463,7 @@
             FileCenter,
             ProjectInfo,
             Summary,
-            quillEditor
+            quillEditor // 富文本
         },
         
         data() {
@@ -557,7 +557,6 @@ toolbar: 'bold italic underline strikethrough | fontsizeselect | forecolor backc
                 commentList: [],
                 editorOption: { // 富文本框里面的默认值
                     placeholder: '请输入文本...',
-                    theme: 'snow',
                      modules: {
                         toolbar:[
                             ['bold', 'italic', 'underline', 'strike'],    //加粗，斜体，下划线，删除线
@@ -579,8 +578,10 @@ toolbar: 'bold italic underline strikethrough | fontsizeselect | forecolor backc
                             ['clean'],    //清除字体样式
                             ['image','video']    //上传图片、上传视频
                         ], //工具栏设置
-                    }
-                }
+                    },
+                    theme: 'snow',
+                },
+                textContent: true, // 控制提交 
             };
         },
         methods: {
@@ -588,7 +589,38 @@ toolbar: 'bold italic underline strikethrough | fontsizeselect | forecolor backc
                  if(this.count >= 6) return
                 this.count += 2
             },
-
+            onEditorFocus() {
+                this.onEditorBlur()
+            },
+            // 获得焦点时触发
+            onEditorBlur(){
+                let theEle = this.$refs.text; // 获取元素
+                console.log(theEle.value); // 获取到富文本内容
+                var img = theEle.value.match(/<img[^>]+>/g); // 赛选 img 标签
+                console.log(img);
+                var arrImg = ''
+                for (var j = 0; j < img.length; j++) {
+                    // 正则匹配，摘出img标签下的src里的内容，即capture
+                    img[j].replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, function(match, capture) {
+                        arrImg += capture
+                    });
+                }
+                // 原来的字符流大小，单位为字节
+                var strLen = arrImg.length;
+                // 计算后得到的文件流大小，单位为字节
+                var fileSize=parseInt(strLen-(strLen/8)*2);
+                console.log(fileSize,"字节");
+                var size = "";
+	            size = (fileSize/1024/1024).toFixed(2);
+                if (size > 2){
+                    this.textContent = false
+                     this.$message({
+                        showClose: true,
+                        message: '图片超过了2MB，请重新上传',
+                        type: 'warning'
+                    });
+                }
+            },
             // 侧边栏的点击事件
             retract() {
                 if (this.$refs.box.className == 'el-icon-arrow-left') {
@@ -1454,6 +1486,11 @@ toolbar: 'bold italic underline strikethrough | fontsizeselect | forecolor backc
             },
 
             submitInsert() {
+                if (this.textContent !== true) return  this.$message({
+          showClose: true,
+          message: '图片太大，请重新上传',
+          type: 'warning'
+        });
                 this.$refs.form1.validate(valid => {
                     if (valid) {
                         delete this.addForm.subTaskList;