WangEditor增加附件上传功能

WangEditor富文本官方地址

// 上传附件功能
// 第一，菜单 class ，Button 菜单继承 BtnMenu classclass FileMenu extends BtnMenu {constructor(editor) {// data-title属性表示当鼠标悬停在该按钮上时提示该按钮的功能简述const $elem = E.$(// 这里使用opacity: 0将上传文件不显示，代替使用img显示，但input仍在img上方，在点击图标时，会弹出文件选择页面`<div class="w-e-menu" data-title="上传文件"><div style="width: 16px;height: 16px;display: flex;"><img src="./static/img/file.png"/><input type="file" style="opacity: 0;width: 16px;height: 16px;position: absolute;" multiple="multiple"  onchange="handleFileChange(this)"/></div></div>`)super($elem, editor)}// 菜单点击事件clickHandler() {// 做任何你想做的事情// 可参考【常用 API】文档，来操作编辑器}// 菜单是否被激活（如果不需要，这个函数可以空着）// 1. 激活是什么？光标放在一段加粗、下划线的文本时，菜单栏里的 B 和 U 被激活，如下图// 2. 什么时候执行这个函数？每次编辑器区域的选区变化（如鼠标操作、键盘操作等），都会触发各个菜单的 tryChangeActive 函数，重新计算菜单的激活状态tryChangeActive() {// 激活菜单// 1. 菜单 DOM 节点会增加一个 .w-e-active 的 css class// 2. this.this.isActive === truethis.active()// // 取消激活菜单// // 1. 菜单 DOM 节点会删掉 .w-e-active// // 2. this.this.isActive === false// this.unActive()}}// 菜单 key ，各个菜单不能重复const menuKey = 'fileMenuKey' // 注册菜单E.registerMenu(menuKey, FileMenu)this.editor = new E('#editor');

以上代码需在new E之前完成

//在vue中，需要将input onchange方法注册在window上，避免出现not defined错误
window.handleFileChange = this.handleFileChange;

上传逻辑

handleFileChange(e){let agentInfo = JSON.parse(localStorage.getItem("agentInfo"));let formData = new FormData();for (let i = 0; i < e.files.length; i++) {// formData.append(file.name,file);let file = e.files[i];formData.append('files['+i+']', file, file.name);}formData.append("type","1");formData.append("companyNo",agentInfo.companyCode);let config = {headers: {'Content-Type': 'multipart/form-data'}}let that = this;this.$http.post("/common/editorUpload.json",formData,config).then(function (res) {  //消息查询let result= res.data.errno;if(result != "0"){that.$Message.error('文件上传失败');return false;}res.data.data.forEach(item => {//将返回的数据 append在富文本后面that.editor.txt.append('<a target="_blank" style="color:blue" download href=\''+item.url+'\'>'+item.name+'</a><br>');})})}

WangEditor增加附件上传功能相关推荐

闲人闲谈PS之二十一——SAP自定义程序增加附件上传下载功能
惯例闲话:国庆假期后,状态不佳,闲人找回状态的方法,对电脑翻箱倒柜,整理文件,往往在整理鸡零狗碎时,会有一些新收获,这倒成了自我调整的一套规律- 这次整理捣鼓,还真是发现了一个解决长久以来SAP被人吐 ...
activiti扩展节点属性（在UserTask节点上添加附件上传功能）
给节点添加属性: 1.首先在stencilset.json上模仿其他属性添加新的节点属性的基础配置注意type属性前端根据这个属性值去确认改节点属性在页面上所要表现得形式 {"name ...
Django1.11 扩展User属性增加头像上传功能
[Django自带的User模型没有头像和电话这两项属性,因此需要通过扩展User达到我们想要的效果,根据官方的文档,扩展新字段到User只需要用one-to-one(一对一)模型即可. 一.创建一个 ...
【若依(ruoyi)】附件上传功能
前言若依(ruoyi): v4.6.0 layui: 2.3.0.参考这里. jQuery: v2.1.4 附件上传功能表格使用若依(ruoyi)封装的bootstrapTable 表格数据加载使 ...
java上传文件限制大小_Java Web：附件上传，两种文件上传限制格式及大小方法，学习笔记文件操作【诗书画唱】...
附件上传: package com.jy.controller; import java.io.File; import java.io.FileOutputStream; import java.i ...
Dynamics 365 OP的UCI下附件上传超过大小限制后的提示错误
针对CRM自带的附件上传功能,对于用户上传附件的大小限制是可以设置的,比如像下图这样但是在UCI里确碰到了如下的错误,当我上传的附件大于10M时,页面弹出的错误确是5M,而不是实际设置的大小在Cl ...
odoo14 ir.attachment附件上传与附件预览功能
一.附件上传这里收集了三种附件上传方式: 1.odoo自带附件上传安装odoo自带的附件列出及文档模块这样在编辑界面就可以看到附件上传按钮了(odoo14自己测试没成功,暂时不知道原因) 2. ...
织梦dedecms广告管理增加广告图片上传功能
织梦的广告位管理是一个不错的插件内部插件,但是dedecms的广告管理功能稍微有点次,不能直接上传图片生成图片链接本文就是在dedecms广告管理原有的基础上增加广告图片上传功能. 安装方法,对应自 ...
edui 富文本编辑_富文本编辑器wangEditor添加本地上传视频功能
最近做一个考试系统,编辑题目要用到富文本编辑,要求可以添加图片.视频和pdf.此前项目中用的都是wangEditor,使用的时候发现只可以上传本地图片,视频只能添加链接,找了其他插件,也没发现比较好用 ...

WangEditor增加附件上传功能

WangEditor增加附件上传功能

WangEditor增加附件上传功能相关推荐

最新文章

热门文章