输入框粘贴内容优化

src/components/ChatFrame.vue

@@ -38,7 +38,7 @@
                 <!-- 文本 -->
                 <div
                   class="message-content-text receive-record-item"
-                  v-if="item.type === 'text'"
+                  v-else-if="item.type === 'text'"
                   v-html="_parseHtml(item.msg)"
                   style="margin-left: 10px; margin-top: 15px;"
                 ></div>
@@ -84,7 +84,7 @@
               <!-- 文本 -->
               <div
                 class="message-content-text"
-                v-if="item.type === 'text'"
+                v-else-if="item.type === 'text'"
                 v-html="_parseHtml(item.msg)"
               ></div>
               <!-- 图片 -->
@@ -164,7 +164,7 @@
                 <!-- 文本 -->
                 <div
                   class="message-content-text receive-record-item"
-                  v-if="item.type === 'text'"
+                  v-else-if="item.type === 'text'"
                   v-html="_parseHtml(item.msg)"
                 ></div>
                 <!-- 图片 -->
@@ -219,7 +219,7 @@
               <!-- 文本 -->
               <div
                 class="message-content-text"
-                v-if="item.type === 'text'"
+                v-else-if="item.type === 'text'"
                 v-html="_parseHtml(item.msg)"
               ></div>
               <!-- 图片 -->
@@ -267,7 +267,12 @@
       <div class="send-msg-wrap">
         <div class="send-header">
           <div class="tools" style="margin: 10px">
-            <el-popover placement="top" width="300" trigger="click" v-model="popoverShow">
+            <el-popover
+              placement="top"
+              width="300"
+              trigger="click"
+              v-model="popoverShow"
+            >
               <Emoji @addEmoji="addEmoji" />
               <el-button
                 class="iconfont open_emoji_icon"
@@ -304,6 +309,7 @@
             @input="saveRangeLocal"
             @keydown.enter="stopPropagation"
             @keyup.enter="sendMsg"
+            @paste="onPaste"
             class="chatframe_input_con scrollbar"
             contenteditable="true"
           ></div>
@@ -360,7 +366,6 @@ export default {
       socket: state => state.chat.socket,
       friendRecord: state => state.chat.friendRecord,
       roomRecord: state => state.chat.roomRecord
-
     })
   },
   watch: {
@@ -369,14 +374,14 @@ export default {
         if (this.friendRecord[newVal.id]) {
           this.friend_record_list = this.friendRecord[newVal.id];
         } else {
-          this.set_friend_record([newVal.id])
+          this.set_friend_record([newVal.id]);
           this.friend_record_list = this.friendRecord[newVal.id];
         }
       } else {
         if (this.roomRecord[newVal.id]) {
           this.room_record_list = this.roomRecord[newVal.id];
         } else {
-          this.set_room_record(newVal.id)
+          this.set_room_record(newVal.id);
           this.room_record_list = this.roomRecord[newVal.id];
         }
       }
@@ -390,10 +395,7 @@ export default {
     }
   },
   methods: {
-    ...mapMutations('chat', [
-      'set_friend_record',
-      'set_room_record',
-    ]),
+    ...mapMutations("chat", ["set_friend_record", "set_room_record"]),
     handleSuccess(res, file) {
       console.log(`res`, res);
       this.imageUrl = URL.createObjectURL(file.raw);
@@ -404,11 +406,12 @@ export default {
       //  调用函数分割文件 我这里是分割成不超过20M的文件快
       this.fileDataList = this.createFileChunk(file, 1024 * 1024 * 20);
       console.log(`this.fileDataList`, this.fileDataList);
-      
-      request.upload_file(file)
+
+      request
+        .upload_file(file)
         .then(res => {
-          console.log(`res`, res)
-          console.log('============上传成功=======')
+          console.log(`res`, res);
+          console.log("============上传成功=======");
           if (
             file.type === "image/jpeg" ||
             file.type === "image/png" ||
@@ -422,7 +425,7 @@ export default {
         })
         .catch(err => {
           console.log(`upload----err`, err);
-          console.log('===========上传失败2333-----')
+          console.log("===========上传失败2333-----");
         });
       // this.$http.post(this.baseUrl + "api/upload/", fd).then(
       //   res => {
@@ -616,14 +619,16 @@ export default {
     // 将输入框中的图片替换为emoji表情
     formatInputCon() {
       let inputValue = document.getElementById("charInput").innerHTML;
-
       inputValue = inputValue.replace(/<img.*?(?:>|\/>)/gi, val => {
         let unicode =
           "!!" + val.match(/unicode=[\'\"]?([^\'\"]*)[\'\"]?/i)[1] + "!!";
-
+        console.log(`unicode`, unicode);
         return unicode;
       });
 
+      inputValue = inputValue.replace(/&amp;/gi, "&"); // 还原&
+      inputValue = inputValue.replace(/<img src=\"http:\/\/localhost:8080/gi, "<img src=\""); // 去掉复制表情图片的baseurl 
+
       return inputValue;
     },
 
@@ -696,6 +701,22 @@ export default {
         e.stopPropagation();
       }
     },
+    onPaste(e) {
+      const data =
+        e.clipboardData.getData("text/html") ||
+        e.clipboardData.getData("text/plain");
+      const reg = /<img\s+.*?src=(?:'(.+?)'|"(.+?)")\s*.*?(?:>|\/>)/gim;
+      const srcReg = /^(?!<img src=\"http:\/\/localhost:8080).*/gim // 匹配不以<img src=\"http:\/\/localhost:8080)开头
+      const imgArr = data.match(reg);
+      if (imgArr) {
+        const notEmoji = imgArr.some(item => srcReg.test(item))
+        console.log(`notEmoji`, notEmoji)
+        if (notEmoji) {
+          // 含有除emoji以外的图片,阻止粘贴事件
+          e.preventDefault()
+        }
+      }
+    },
     sendMsg(e, fileurl) {
       console.log(`e============`, e);
 
@@ -704,6 +725,7 @@ export default {
         this.msg = fileurl;
       } else {
         // 输入框信息
+        console.log(`this.formatInputCon()`, this.formatInputCon());
         this.msg = this.formatInputCon().replace(/<br>/g, "\r\n");
         console.log(`this.msg`, this.msg);
       }
@@ -734,7 +756,7 @@ export default {
         this.room_record_list = this.roomRecord[this.selected.id];
       }
       // 发送消息后关闭表情选择弹窗
-      this.popoverShow = false
+      this.popoverShow = false;
 
       this.$nextTick(() => {
         // 输入enter后置空
@@ -742,13 +764,13 @@ export default {
         this.msg = "";
         this.messageType = "";
         // 滚动到底部
-        this.$refs["myScrollbar"].wrap.scrollTop = this.$refs["myScrollbar"].wrap.scrollHeight;
+        this.$refs["myScrollbar"].wrap.scrollTop = this.$refs[
+          "myScrollbar"
+        ].wrap.scrollHeight;
       });
-    },
-  },
-  created() {
-    
+    }
   },
+  created() {},
   mounted() {
     this.initEmojiPic();
   }