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].namethis.fileSize = document.querySelector('#btnfile').files[0].sizethis.fileType = document.querySelector('#btnfile').files[0].type//this.fileUrl= window.location.href + '/' + document.querySelector('#btnfile').files[0].namethis.fileUrl = window.URL.createObjectURL(btnfile.files[0])this.filebox = trueconsole.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].namethis.videoSize = document.querySelector('#myvideo').files[0].sizethis.videoSrc = window.location.href + '/' + document.querySelector('#myvideo').files[0].namethis.videobox = trueconsole.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;
}

效果如下：

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

vue中使用wangeditor富文本编辑器（含图片上传和回显）
最近在写vue的项目中,遇到一个需求,点击编辑,显示弹框,在弹框中的富文本编辑器中编辑自定义文本样式,可以上传图片并回显.编辑完成确定后显示在页面上. 首先先写一个editor.vue的页面.(建议单 ...
Vue 中引入markdown富文本编辑器并根据md格式渲染
Vue 中引入markdown富文本编辑器在vue组件中,比较好用的是mavon-editor,github文档地址 https://github.com/hinesboy/mavonEditor ...
Vue项目中使用wangEditor富文本输入框（推荐）
vue中安装wangEditor cnpm install wangeditor 创建公用组件:在src/vue/components文件夹中创建wangEditor.vue <template ...
vue管理后台项目中使用wangEditor富文本编辑器
背景公司需要做一个后台文章管理的模块,通过富文本编辑器编辑文章,在前端显示.调研了很久,决定使用wangEditor -- 轻量级 web 富文本编辑器,配置方便,使用简单.一些编辑器的说明. 开始 ...
在Vue中使用Tinymce富文本编辑器+上传图片到七牛
公司官网后台需要做一个上传新闻.公告的功能,自然而然就需要用到了富文本编辑器. UEditor.Simditor.wangEditor.CKEditor.TinyMCE.Quill,这是当前比较热门的 ...
Vue中使用vue-quil-editor富文本编辑器+el-upload实现带图片上传到SpringBoot后台接口
场景系统中经常会用到富文本编辑器,比如新增通知和公告功能,并且需要添加上传图片. vue-quill-editor官网: https://www.npmjs.com/package/vue-quil ...
vue中使用element-tiptap富文本编辑器
element-tiptap富文本编辑器 npm安装 npm install element-tiptap --save yarn安装 yarn add element-tiptap 全局引入 imp ...
在Vue中使用CKEditor5富文本编辑器
在项目中遇到富文本编辑器需要实现粘贴图片的功能,使用场景:如用户在其他地方截图可以直接在富文本编辑器内粘贴. 找了一圈市面上开源免费的富文本编辑器,最后选中CKEditor.ckeditor doc ...
vue中使用tinymce富文本
安装方式一: npm install @tinymce/tinymce-vue -S npm install tinymce -S 方式二: 将下面的配置粘到package.json文件depend ...

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

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

最新文章

热门文章