Vue中使用Wangeditor富文本实现聊天发送文件驻留

1、最近遇到一个需求，类似企业微信发送文件及视频时可以在文本框内驻留，然后点击发送按钮进行文件发送，这里使用的是富文本框进行处理，Wangeditor富文本框。
自定义添加菜单功能如下：

cnpm i wangeditor --save

vue页面中引入：

import E from 'wangeditor'

methods中写入自定义组件方法：

resetEdit() {
var that = this;
this.editor = new E("#edit");
E.registerMenu("file",File)//文件上传
E.registerMenu("videos",Videos)//视频
var editor = this.editor;
}

data(){
	return{
	      fileName: '',//文件
	      fileUrl:"",//文件路径
	      fileSize:"",//文件大小
	      fileType:"",//文件类型
	      videoUrl:"",//视频
	      videoSize:"",//视频大小
	      videoSrc:"",//视频路径
	      editor: null, //富文本
	   }
}

在method中调用：

this.resetEdit()

页面引入组件js:

import {File} from "../../../utils/editorMenu.js"
import {Videos} from "../../../utils/editorVideo.js"

editorVideo.js：

import E from "wangeditor";
const {$,BtnMenu} = E;
export class Videos extends BtnMenu {
    constructor(editor){
        const $elem = $(
            `<div class="w-e-menu" data-title="视频">
				<i class="el-icon-video-camera-solid"></i>
			</div>`
        )
        super($elem, editor)
    }
    // 菜单点击事件
    clickHandler(myvideo){
        document.getElementById("myvideo").click();
        console.log(myvideo,'视频对象')
    }
    // 尝试修改菜单 active状态,不改就不写，比如加粗要标亮的时候使用
    tryChangeActive(){}
}

editorMenu.js：

import E from "wangeditor";
const {$,BtnMenu} = E;
import uploadFile from "./uploadFile"
export class File extends BtnMenu {
    constructor(editor){
        const $elem = $(
            `<div class="w-e-menu" data-title="文件">
				<i class="w-e-icon-upload2"></i>
			</div>`
        )
        super($elem, editor)
    }
    // 菜单点击事件
    clickHandler(btnfile){
        document.querySelector('#btnfile').click()
        console.log(btnfile,'文件对象')
        // this.file()
    }
    // 尝试修改菜单 active状态,不改就不写，比如加粗要标亮的时候使用
    tryChangeActive(){}
}

vue页面中写入驻留div:

<!--文件驻留展示 -->
                     <div class="total_content chat_bg_omsg" v-show="filebox">
                         <div class="chat_bg_msg_content">
                             <div class="chat_bg_msg_content_text chat_bg_msg_content_file ">
                                 <!--doc-->
                                 <div class="file_container" v-if="this.fileType == 'application/msword'"> 
                                  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAsCAYAAAAJpsrIAAAAAXNSR0IArs4c6QAAAtdJREFUWEftmW9r00Acx7/Jpc0aZm20IEwnVBgbVNAnA59NRRFhMnRS8Nke6xvwmewt7IFvwAcD0Qd9MhXFP7BnIrqhD+aGhbkNip2rrb2SmEvlWrKmtWmv2qQ4eo+Su19++dw331zuLhJc5fyrinLU+Dlu24jLkKPutl4cb5e+WZDI9y0bq1up0XK7nJLTOPOMjsoVOynbUqgXEK1yZPJZUIuCAAiHou/e3zq543WvKhiHUljlrF9ATl4HjJ93gpP449ON0iU/lWoF1glOmn1qJGFbp/xWi+d3K+bcz0s56fpSccoPo7fzWHNbKzhpdql0LQi1vBRzK6cPx9aWb5z4zOsCBcvSPHJ0z1MHrpw+dGRlOTWyGSgYZQYye54jRBWYw/0YOvwiUDB+4z2ziGwhB9bGP3pkeDdwMM5jgME0KajVGi+kSGZfwERetoMDFteAHBXp87/FdKXY/DkVSZ3g3lsDn3Lt7FuHSsYJ5ifVajy/TrR0BfboqlbNu7hh4PG6GNh0ApibqF1384m41H8F9mCDIr0u1vfpBMPcxKEB2EAxIcM45v+vPJYaUwFYeNj0tvbV/LfPqLg4wucFwMsdhvsr9fGqb2BuKMcPbri+gLmh0pnaBHAmoTcoFzjYca3++DjUwqoJalDcnYw1wG0WaHADLGWAVrMUHCg9XBvdt4vZBjh3rO+fJMdLzVBOfTOcUx8ImBdUOzjfwBamVIxo5I/H5zU6u5XLUoY7b3ya9hTNHRyLEGyXNTie6vTJ4HBjMb4IIVBJvFP4fntX0x6+iGDMgkb4KC9eiowiQlQo1cWZWOkKTCxlb6IGYN3qOFDs4CgW5MadqGo27EKgW52iYJCVL9XN4Vi5cJlAUYQv9DGQwbLykejzQLfTRfpjEelD+or2teEHhMR+ne6XclypCgl95FC8A/tg/KT2y8Yct23Tl182rRTjRpflcG5XDa+9viBZTsxv8/DYXUEGpc8AAAAASUVORK5CYII=" alt="">
                                    <div class="file_info">
                                        <div><a :href="this.fileUrl">{{this.fileName}}</a></div>
                                        <div><a>{{this.fileSize}}KB</a></div>
                                    </div>
                                 </div>
                                 <!--text--> 
                                 <div class="file_container" v-if="this.fileType == 'text/plain' ">
                                 <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAsCAYAAAAJpsrIAAAAAXNSR0IArs4c6QAAA+pJREFUWEftmUtvE1cUx/93HvZ4QvxIHOw8IQ5JBKEqTVFFkaqybStV2bardtFFV+UbIPEFSPeVypZdP0ERCEgXqAGaBuXtEDtxcJx4EmN7PJ6Z6l5jMJHHnTEzbha9kiXH98w5v/s/5849uiFoGPMbG+GSZtwAcI0Alxrn3Pi+kz86BCEP/bz441fTFzZb+ST1ybnl1e9MkFsECLsB0cxHck9BsaJBEDgj5JO+nfnkgztWsRgYhQLIr14B1f3WwejfPEfMsBT4xgqOvE7fhpdKNQP7NzjyaHltlgA/ea0W9d+oWD2elXIUbN6LQm9VY8fnmsGRueU1sxNqWSnWoBxOn+q68eX01E36W0fBskdF0I/V4DmCHln+4evLF3/pKFhZq2I9m2+ZIPoqicpdiY6CUaJ8UUVGKcAwrSsoIkv3XQGT/T4IHMeUULUq1Gq1pSpaVUeJ2elN7XjC7b0XWF+wG0M9EfhF4Z0AFCyV20f2sND2vmoLjOc4TPTHEJIDLQMflspY2s5ANwzHgG2BXRwexCnJz4Kt7O7h71QG5YoGwzAhSz5MDcUxHouyeaVYwvP0jvdgA5EwRqI9LNCDpQ0UymWE5RokHbR+8iUV4S4Zn00m2G+p/QOkcgeO4Bwr9nHiDESex2J6Fy8VBdKx+qpHp7tvOBrB1GAcVd3A4/Wkd2A+XsB0YoQFuPd8FX6hthOtxsErFV9cOs+mn71IoahWbMM5UkzgBVxOjKCi6/hzvWWfxwDoC/Xq5Bh8VOHUNuhmsDscgRkmwdWJUaT3FWzlcrZiTCfOMLBnL9IoqqqtZ6iRI7DDkoqiprMURmTJRhCCK+OjzO5JcgtlTbPxTM3EEZhtr68N+4JBjMWitlPf6N8zMHpMnR/sZzt4IZVBoWTdVTRbsCdgQ70RxEIhiDyH/VdF/LWZhl/kHQnuKhhVabI//ubsLKgV/L6wjNNB2RGUqzVWS90AU4mO+c00tvYO2oJyFWxiII6eLpml7u7iKrr9IoKBt0eVU8lcS+WV8dq5OLeSBIHzbuI4uCtgqqbj8wvjzPfj9U1U9eYNoBPVXAGjR0/VJKDVJfuc7T4rWFfAqHN6KgREAaJwgsBoRzsW62OLX9vNttWxelJj8XAIZ/t6me9kNodMXnFSTk1tXUllveugEf5YoQ3hCdmVumGydpqOcMBPr5hOhmLvTdHEgSup/B/MCwWc+iRzS2tPQPCh0wc9tTfxtKNXnXYXYwI/s8vhsmbQl0/I7oMe2ymSyJ3t6HW6vQWZ3386ce72O/+AAMjsf6icApjXKRTrYBtXwdJaMa4DmOnYhjDxFMBvko+b/Wh09M096D9tweEnnmOqdAAAAABJRU5ErkJggg==" alt="">
                                    <div class="file_info">
                                        <div><a :href="this.fileUrl">{{this.fileName}}</a></div>
                                        <div><a>{{this.fileSize}}KB</a></div>
                                    </div>
                                 </div>
                                  <!--xls--> 
                                 <div class="file_container" v-if="this.fileType == 'application/vnd.ms-excel' ">
                                 <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAsCAYAAAAJpsrIAAAAAXNSR0IArs4c6QAAAzFJREFUWEftmU1ME0EUx/+zbW3LR8tX/MDEfhij0UQNB4wJBxNRgwdDIB70YCRGE082xkA8FfVsgERPQoCjF8JFuUnEkBAPoiInDFVboCBQPkopWLpmVlaXZnc7u3aXhDCndt+bN7/5vzev7ZRAMmpDnUXccipICM4B5LTUlovX4fjMEgEZXLfb7g5XPPiuFpOIxrrPHTcBvoUQFOUCQi7G14VJJFKrsFosabct//rQ2YcvldYSwCgUIXynUUBiXBGMvuc4whfvKbymBEf+pG8jZKRScmDZ4Ej9SHsrgHtGq0XjSxUT11NSjtSPvBg2otDVaizTJgdHFePNUEtJsX/KcSh3lgb7K+8/ps9MBYsm5jGTiCnqwHEc9jrct9+daWw3FWw1tYaxhYhqgmgrcRQU+U0Fo0TzySVMrswizStXUIndNWA6GIVb2/iF5MY6qIJyw8ZZZrcFjOWw7YKxqCT12RmKVbo8aDxUjf7YGJ5PDGQVIY/bgyZPNU7kH0Aw9BqjK1NZ54gOmhSrKvQi4DkvzM0GR6Ee+S/D5ygV/Ft+vMHgUsgYsHB8Bk3eS6jbX6EKlwnVE/2AjugQnFa7MWCpdBrjixNoPnJFEU4O6lnkLUocLmYoXZ+VanC5gtIFRicpwXmdJX9riqZPj1K6il+aCzk40f6/ULoVEwEo3M/4HPoqA3BZHcLjSDKGG1+6NNdUZgFqaheZk2lNBX01OOws22LK1kpYToFuMArV7KuBfxOKpo+ObK2EBUp3KuWg2sL9iCWXVVsJK5QuMDko8fSx9DlWOE2pVIOSHohsTZgFThPYxeKjuHOwSoir1hLklOucGsKruVEWJsFHE5jH6sLTY1fRHRlEd/S9akuQwl0oO44noT6Mr80bA0Z/SEwnYtiXV8zUpyhcOD6NZGodfnc57BabMWDMUXPgqCmVOViPOcQuGLNUm467iu0cxepG2j8S4JTWHRnpzwOfTL3q1LCZNuFy2LKc+gZC3BomGufK84sbhVavqdfpLLvhedLQc/JW15Y/IAjSrdumHM8v8uACFEr4diHdhXDnH08FAFJr1oGghQ7wvekCa2uvr2FB5PkNOgPlyssXQdkAAAAASUVORK5CYII=" alt="">
                                    <div class="file_info">
                                        <div><a :href="this.fileUrl">{{this.fileName}}</a></div>
                                        <div><a>{{this.fileSize}}KB</a></div>
                                    </div>
                                 </div>
                                 <!--pdf -->
                                 <div class="file_container" v-if="this.fileType == 'application/pdf' ">
                                 <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAsCAYAAAAJpsrIAAAAAXNSR0IArs4c6QAAA8FJREFUWEftmU1IFFEAx//vNTP71aaIFJ0UjyoUSHgQyy4hddlDl6KggiA8mCB+gGDYRaFDegghNlKsIPIghJ4FFYqQVFLx4gdIpi6a2M66O7vz4r11zWrXeeu4W0QDy8zs/N/7/97/fczylmDfwerqcuFwPABQBULO7n92FNc7q6vfQOmoE7hHnj1bOqhOknjImptvgbHHICT3KCCS1aF//oxYKASiKKbm8Vx3+P2vU3kJMAEFPM8UUKLeBJi4J4Q5Tpy4lgqO7HbfQiaTSgpmAUdYU1MnCLmf6bR4/T8lljBMkRwH+5iJgX7QGPvtWRI4wpqbWTbS4h6hlRVEdT25HaVw5ec/UJ88eSh6OZtg4Y0NRDY3U+dAKZw5OXe1p0/9WQVjhoFvy8uAaaaE40vJcbe7KKtgnCYaDCK0tnYgnOLxvMs6mIjKNBELhxENhZImRxUl8GfAJGbbPwxWVgZcvQrwbnnxApifl8jDWmI7MVZTAzidcacvX0BevbJ2lVDYBkN7O8zZWTDGQCgF7e2VsLWW2AaL3bwJ6vUKMOj63wNmXLgAtbpaRBAdHYUyOGgdh4TCdmIRlwtaa2scrKcHytychK21xDYYf82Yd+7gWHExYo8e4djGhrWrhMI2GPdg9fUg+fnAp0/Ay5cSttYS+2CnTwO1tT+c+vqAmRlrZwuFbTDT5wMtL4cxPAy1qkrMTPj9wMqKLTh7YHxhbWgACwYRbWsTbwABx98C/f3xc1FRHJD/DltYiJ8lDntgFy8Cly7BGBiA+v49woEA1JYW0MLC1NaSXX14sN20xDLR1QWltBQoKREJmYuLoCdPAm43wNOcnoa5vg7tyhWYQ0OgIyOWmR0OjEPxtM6f3zOIjY3BmJpCdHwcCmMwvV6oPl+8axOHrsPo7oYaCBwxGAeqqIh/XC6w9XWE37xBbGICqqJAdbtBVHXP1NjehhGLAadOie/M5WV4cnN/0qQilE+MLws3bgB5eXt17bS2QgsGQTXNMoF0BXJgibVK18V4Uc6dQ6S/H9qHDwCl6XpK6aXAzMpK0MuXYS4tgRYUIMqB+vqgeDxSJocRSYGFHQ44GhvFLOMLKXv7FloGum9/A6TAzEgE+taWKOdwOqF6vYcJIa0yUmBp1XhE4v9g6Qb5P7H0E2tqmgAhZ9ItmFE9Y5NZ3eqUbgxjXYnN4UUQkiNdMJNCxrYQDhdmdTtdsj23SUdHz69/QPAd7D+THE+KkDoOxRuwB8ZvxJ6/01kHxnxZmxCMTYKQAezsdJLOzq+JVL8DO6C9mfuviS8AAAAASUVORK5CYII=" alt="">
                                    <div class="file_info">
                                        <div><a :href="this.fileUrl">{{this.fileName}}</a></div>
                                        <div><a>{{this.fileSize}}KB</a></div>
                                    </div>
                                 </div>
                                 <!--pptx -->
                                 <div class="file_container" v-if="this.fileType == 'application/vnd.openxmlformats-officedocument.presentationml.presentation' ">
                                 <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAsCAYAAAAJpsrIAAAAAXNSR0IArs4c6QAAAyxJREFUWEftmU1oE0EYht/ZrNskTX+86EHFIv5cpOpNEMSb9hY9KNWDVhEUBOtBqqINCsXopelJFGkVRC0KFkWwKqUUFBSxrRZEqrYqiinaNjE2zf6N7CYpbc0mM0t3K6ULgYT5vnmfeb+Z2d0JwaSLNgbLFRkhCmwBsH5y20x8V0ZicULpM78oHyYNzz/n65NkG+XzwX1UQCOA8pmAyNWHMjQMPSWDeATd45N2+8OdrVZaJlgGqsUpoGy/WTDzNwEVi73VVnDEKJ8sY8BJp3KCFYAjcjgYoQRHnXbL6H+KY1lBC+dI6kKw24mJnm+O/dOWA84Ao264ZelYVlwgWFASCPkanpwzq+wmmBpLQIsnrH0w4Py+g75wx1VXwaisQI7+ylsgYysJBLDCVTCDSEskoY7GAWo9g4RiX5frYAYcVTRQVYEuq7ndE8jPWQFjWWxzA4wsWwtx0y6WAUMfGoDe/xL0ax9T/PQgLsfEnWchVFRyCdEvfVDuhYHUH648LjDPjnp4Vm4Akglo3/rzCnmWrAJ8ATOGRj9BuV3PBWcLTP/Yg/Hm49ZgqmY+3khbayBVHTDjtFcPoHU0M7tmD2zgDdQ7oYIi6kgcUnUIYuVmM1a+uL1gzsS9neeWlC2lzghmiOily+E9FDH1lFtnmBeDo46ZYNQDb93dNNiNU6Df3zG55jgYFq+BtDecLuX1E0D0/f8BNrHFJBOQm/YAgjDLYEXFEKuOQFi9Me1WewvQe58JygiyVUqMJ0CHBi1FSNkiwPhkLu1DN5SbpyF4JYfBmLsH5M5WqO1XIC4s5ciy6Rgd/gHlxcO8QnTsN5S3XRBJEoLPywVlu5QFd34AQpHEVbrp5LbmGM8Gy21VJmFugamvH0N/esmuGUx5XI5p/qWQtu2H8ugyhLEok4DdIC4wPTluvkCIJX7mHdwVMLsidvK4HLMjYDdnHozXuXnH+B0LB3tAsI430dF4il5XjzpZB0MomtKHwykMgqCMNdHROIqYVIQKV4/TWQZEdNRIJ9uuTf0DgiAya85RxAhFrQFlPihOHkXmzL8WFEHXFgRFLwjaJAkRcqxtNMvzF9uluhnYDiDCAAAAAElFTkSuQmCC" alt="">
                                    <div class="file_info">
                                        <div><a :href="this.fileUrl">{{this.fileName}}</a></div>
                                        <div><a>{{this.fileSize}}KB</a></div>
                                    </div>
                                 </div>
                             </div>
                         </div>
                     </div>
                     <!--视频驻留展示 -->
                     <div class="total_content chat_bg_omsg" v-show="videobox">
                         <div class="chat_bg_msg_content">
                             <div class="chat_bg_msg_content_text chat_bg_msg_content_file ">
                                 <div class="file_container">
                                 <img width="38" height="44" src= "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.improve-yourmemory.com%2Fpic%2Fd812e9e8b7edb0a4189a89a2ea3b5cdb-0.jpg&refer=http%3A%2F%2Fimg.improve-yourmemory.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652405766&t=d75215de345f3a19c46ca8f37df13041">
                                 <div class="file_info">
                                     <div><a :href="this.videoSrc">{{this.videoUrl}}  </a></div>
                                     <div><a>{{this.videoSize/1024}}MB</a></div>
                                 </div>
                                 </div>
                             </div>
                         </div>
                     </div>

<!--视频上传 -->
        <div style="display:none">
            <input 
                style="display:none" 
                type="file"  
                accept=".mp4,.m4v,.mp3,.wmv,.rmvb" 
                id="myvideo"  
                @change="checkFilevideo"/>
        </div>
        <!--文件上传-->
        <div style="display:none">
            <el-button @click="clickHandler"></el-button>
            <input 
                type="file" 
                accept=".xls,.doc,.txt,.pdf,.pptx" 
                id="btnfile" 
                @change="checkFileSure"
              />
        </div>

methods写入自定义的视频、文件方法：

//文件
checkFileSure () {
        console.log(document.querySelector('#btnfile').files[0])
        this.fileName = document.querySelector('#btnfile').files[0].name
        this.fileSize = document.querySelector('#btnfile').files[0].size
        this.fileType = document.querySelector('#btnfile').files[0].type
        //this.fileUrl= window.location.href + '/' + document.querySelector('#btnfile').files[0].name
        this.fileUrl = window.URL.createObjectURL(btnfile.files[0])
        this.filebox = true
        console.log(this.fileUrl,'文件地址')
        console.log(this.fileName,this.fileSize,this.fileType,'文件')
    },
    //视频
    checkFilevideo(){
        console.log(document.querySelector('#myvideo').files[0])
        this.videoUrl = document.querySelector('#myvideo').files[0].name
        this.videoSize = document.querySelector('#myvideo').files[0].size
        this.videoSrc = window.location.href + '/' + document.querySelector('#myvideo').files[0].name
        this.videobox = true
        console.log(this.videoSrc,'视频地址')
        console.log(this.videoUrl,this.videoSize,'视频')
    },

.total_content .chat_bg_omsg{
    flex-direction: row-reverse;
}
.total_content .chat_bg_msg_content{
    max-width: 80%;
    position: relative;
}
.total_content .chat_bg_omsg .chat_bg_msg_content_text {
    background-color: #e7f4fd;
}
.total_content .chat_bg_msg_content_file .file_container {
    display: flex;
    align-items: center;
    border: 1px solid #f1f1f1;
    background-color: #f7f7f7;
    height: 7vh;
    width: 60%;
    border-radius: 5px;
}
.total_content .chat_bg_msg_content_file .file_container .file_info {
    display: flex;
    flex-direction: column;
    padding-left: 6px;
    font-size: 12px;
}

效果如下：